Props Là Gì

     

Trong nội dung nội dung bài viết này phần lớn các các bạn sẽ cùng với nhau đi tìm đọc về khái niệm props vào ReactJS, and giải pháp để cần thực hiện nó trong một Dự Án BĐS. Trong quy trình lập trình trong những phần mượt React, việc giao thiệp trong số những components với nhau là vấn đề trong khi không còn điều gì khác thiếu. React đến phép chúng ta làm vấn đề này bằng chiêu thức cần áp dụng props.

Bạn đang xem: Props là gì

Bài Viết: Props là gì


Props là gì ?

Thứ nhất, bạn phải khám phá về quan niệm components trong ReactJS bởi vì props và state được xem như thể 2 phần khá đặc biệt quan trọng trong 1 components.

Props là 1 giữa những object được truyền vào trong 1 components, từng components vẫn nhận vào props & trả về react element.Props cho phép bọn họ giao thiệp trong những components cùng nhau bằng chiêu thức truyền tham số qua lại một trong những components.

Lúc 1 components phụ vương truyền đến component con một props thì components con chỉ có chức năng đọc and không trường tồn quyền chỉnh sửa nó mặt phía components cha.

Chiêu thức truyền một props tương tự như chiêu trò mà các bạn thêm một attributes cho một element HTML. Tại đây mình có một ví dụ:

const ứng dụng = () =>Trong lấy một ví dụ phía mặt trên, component mang tên Welcome sẽ nhận được ngân sách của props mang tên name vừa new được truyền vào.


Props trong React

Tiếp theo sau, hầu hết các bạn sẽ đi tìm kiếm kiếm phát âm về chiêu thức thao tác với props trong React kể cả các phần như truyền một props, hiểu props,…

Truyền props trong các những components

Bạn cũng luôn có thể truyền tài liệu từ 1 component với nhau bằng phương pháp truyền như 1 attributes vào HTML element như sau:

const ứng dụng = () => Gía trị của props.childrenGiả sử bản thân đang mong muốn muốn truyền mang đến components có tên Welcome các túi tiền như:

const app = () => Xin kính chào phauthuatcatmimat.comVậy trong components Welcome chi phí của props đã là 1 giữa những object tất cả các giá cả truyền vào :

name: “Nguyễn Trí”, age: 18, gender : 1, children: “Xin kính chào phauthuatcatmimat.com”Khi chúng ta truyền một giá cả phía phía bên trong một tags thì nó có khả năng sẽ bị là giá cả của nằm trong tính chirlden trong object props như phía bên trên ví dụ cụ thể cụ thể mình vẫn đề cập sinh sống cuối bài để gia công rõ hơn.

Xem thêm: Iphone 6 Bản Quốc Tế Giá Bao Nhiêu, Có Nên Mua? Iphone 6 Phiên Bản Quốc Tế Giá Bao Nhiêu

Nhận props vào components

Những chúng ta cũng có thể nhận ngân sách chi tiêu của môt props bằng phương pháp nhận vào thông số trong functional components and this.props trong một class components. Ở bên dưới mình có ví dụ:

//Nhận ngân sách chi tiêu của props vào class component bởi this.propsimport React, Component from “react”;class Welcome extends Component render() console.log(this.props) //túi tiền vàng props return (Xin kính chào this.props.name !); export default Welcome;//Nhận props trong functional components bằng chiêu thức//bổ nhiệm thông số trong function.import React from “react”;const Welcome = (props) => console.log(props) //túi tài chính props return (Xin xin chào props.name !);;export default Welcome;


Ví dụ vào thực tiễn

Giả sử mình đang mong muốn muốn truyền những props có tên name, type, color, size size,.. vào vào components có tên Clothes. Phần đa các bạn sẽ triển khai tiến hành triển khai tiến trình lần lượt như sau :

Trong thư mục src của Dự Án BĐS hầu như các các bạn sẽ xây đắp tạo thành một file có tên Clothes.js:

import React from “react”;const Clothes = (props) => console.log(props) //túi tài chánh props return (props.children Tên: props.name Loại: props.type Màu: props.color Form size: props.form size);;export default Clothes;Component này sẽ hiển thị các props được truyền vào bao gồm: name, type, age, size size,….

Tiếp theo sau ở tệp tin App.js, số đông các các bạn sẽ import component Clothes and truyền vào đây các props.

import React from “react”;import Clothes from “./Clothes”; //Import component vàofunction App(props) return (Clothes 1 Clothes 2);export default App;Ở bên trên mình mình truyền vào các props đề nghị thiết, & mình gọi component Clothes gấp hai với những props rất khác nhau. Họ cùng chạy Dự Án BĐS để nhìn tác dụng.

npm startTruy vấn đường truyền http://localhost:3000 những chúng ta có thể cảm dìm thêm phần đa props được truyền đi đã được hiển thị:

Trong bài bác này chúng ta đã cùng với nhau đi kiếm kiếm gọi về Props vào ReactJS. Đó đó là kiến thức và năng lực rất cơ bản về nó tuy thế cũng xung yếu trong quy trình thao tác với ReactJS sau đây. Mong mỏi rằng nội dung nội dung bài viết sẽ hỗ trợ ích cho bạn.

Xem thêm: Top 5 Cách Làm Bánh Mì Trứng Ốp La, Cách Làm Bánh Mì Trứng Ốp La Lạ Miệng Cho Cả Nhà


Bài sau bài bác tiếpTải Thêm bội nghịch hồi

DANH SÁCH BÀI HỌC

ReactJS căn bạn dạng ReactJS cố gắng mớiList nhà đề

MÃ GIẢM GIÁ
Unica50%Lấy Mã
TinoHost30%Lấy Mã
INET30%Lấy Mã

Gọi năng lượng điện liên lạc

Mã tiết kiệm chi phí với chính sách giảm giá ngay

Khóa huấn luyện

Giới thiệu

Admin Cường, chủ tịch chính của trang web.

2020 – phauthuatcatmimat.com. All Right Reserved Theme GoodNews, nguồn gốc xuất xứ Codeigniter, VPS cài tại Tinohost


*

BÀI VIẾT

Nếu khách hàng phát hiện nay lỗi không nên liên kết, ngôn từ sai, hay như là một lỗi bất cứ gì đó trên trang này thì nên cho bản thân biết nhé. Cám ơn bạn!