Trong nội dung bài viết này các các bạn sẽ cùng nhau đi thăm dò về có mang props trong ReactJS, and phương pháp để áp dụng nó trong một dự án. Trong quy trình thiết kế một phần mềm React, Việc xúc tiếp trong số những components cùng cả nhà là điều đang không liệu có còn gì khác nợ. React được phxay các bạn có tác dụng điều ấy bởi phương thức vận dụng props.
Bạn đang xem: Prop là gì
Bài Viết: Props là gì
Props là gì ?
Trước tiên, bạn cần dò xét về tư tưởng components vào ReactJS vì chưng props & state được xem như là 2 phần khá đặc biệt quan trọng trong một components.
Props là một trong object được truyền vào trong một components, mỗi components vẫn thừa nhận vào props & trả về react element.Props được phép chúng ta tiếp xúc giữa những components cùng nhau bằng cách thức truyền tđắm đuối số qua lại giữa những components.
lúc một components cha truyền cho component con một props thì components con chỉ hoàn toàn có thể đọc and không tồn tại quyền thay đổi nó bên phía components thân phụ.
Phương pháp truyền một props giống như nhỏng phương thức mà lại các bạn thêm 1 attributes cho 1 element HTML. Ở phía trên bản thân cất một ví dụ:
const App = () => Trong ví dụ bên trên, component sở hữu thương hiệu Welcome vẫn nhấn đc kinh phí đầu tư của props với tên name vừa new đc truyền vào.
Xem thêm: Customer Lifetime Value Là Gì, Cách Tính Vòng Đời Khách Hàng Chính Xác Nhất
Props trong React
Tiếp theo, những bạn sẽ đi kiếm gọi về cách thức thao tác với props trong React bao gồm cả các phần nlỗi truyền một props, gọi props,…
Truyền props trong số những components
Quý Khách cũng có thể truyền dữ liệu xuất phát điểm từ 1 component cùng mọi người trong nhà bởi cách thức truyền như một attributes vào HTML element nhỏng sau:
const App = () => Gía trị của props.childrenGiả sử mình thích truyền mang lại components có thương hiệu Welcome mọi ngân sách đầu tư như:
const App = () => Xin xin chào toludenim.comVậy trong components Welcome kinh phí đầu tư của props đã là một trong những object tất cả phần đông ngân sách đầu tư truyền vào :
name: “Nguyễn Trí”, age: 18, gender : 1, children: “Xin chào toludenim.com”lúc các bạn truyền một ngân sách đầu tư phía bên trong một tags thì nó có khả năng sẽ bị là kinh phí của ở trong tính chirlden vào object props nlỗi phía bên trên ví dụ chi tiết bản thân đang đề cập sinh hoạt cuối bài nhằm làm rõ hơn.
Nhận props vào components
Các chúng ta có thể thừa nhận kinh phí của môt props bằng cách thức nhấn vào tmê mẩn số trong functional components & this.props trong một class components. Ở dưới bản thân tất cả ví dụ:
//Nhận kinh phí của props vào class component bởi this.propsimport React, Component from “react”;class Welcome extends Component render() console.log(this.props) //giá thành của props return ( Xin xin chào this.props.name ! ); export default Welcome; //Nhận props trong functional components bằng pmùi hương pháp//hướng dẫn và chỉ định tđắm say số vào function.import React from “react”;const Welcome = (props) => console.log(props) //Ngân sách của props return ( Xin xin chào props.name ! );;export default Welcome;
Ví dụ thực tiễn
Giả sử mình muốn truyền gần như props với tên name, type, color, size,.. vào trong components sở hữu thương hiệu Clothes. Các bạn sẽ tiến hành xúc tiến quy trình theo thứ tự nlỗi sau :
Trong thư mục src của dự án công trình những các bạn sẽ thiết kế sản xuất một tệp tin sở hữu thương hiệu Clothes.js:
import React from “react”;const Clothes = (props) => console.log(props) //Chi phí của props return ( props.children Tên: props.name Loại: props.type Màu: props.color Kích cỡ: props.size );;export default Clothes;Component này vẫn hiển thị phần lớn props được truyền vào đề cập cả: name, type, age, form size,….
Tiếp theo làm việc tệp tin App.js, những bạn sẽ import component Clothes và truyền vào kia hồ hết props.
import React from “react”;import Clothes from “./Clothes”; //Import component vàofunction App(props) return ( Clothes 1 Clothes 2 );export mặc định App;Tại trên mình bản thân truyền vào đều props rất cần thiết, & bản thân call component Clothes gấp đôi cùng với phần lớn props khác biệt. Các chúng ta cùng chạy dự án công trình để thấy công dụng.
npm startTruy cập băng thông http://localhost:3000 những bạn cũng có thể cảm nhận thêm những props được truyền đi đang được hiển thị:
Trong bài bác này chúng ta sẽ cùng nhau đi kiếm hiểu về Props trong ReactJS. Đấy là kỹ năng hết sức căn uống phiên bản về nó tuy nhiên cũng rất là quan trọng đặc biệt vào công đoạn thao tác làm việc cùng với ReactJS sau này. Mong rằng nội dung bài viết sẽ cứu ích cho bạn.
Bài sau Bài tiếp Tải Thêm Bình luận
DANH SÁCH BÀI HỌC
ReactJS cơ bạn dạng ReactJS đổi mới Danh sách chủ thể
| MÃ GIẢM GIÁ | ||
| Unica | 50% | Lấy Mã |
| TinoHost | 30% | Lấy Mã |
| INET | 30% | Lấy Mã |
Liên lạc
Mã tiết kiệm chi phí với chính sách giảm giá ngay
Khóa học
Diễn ra
Admin Cường, quản lí trị thiết yếu của website.
20đôi mươi – toludenim.com. All Right Reserved Theme GoodNews, xuất phát Codeigniter, VPS tải tại Tinohost
BÀI VIẾT
Nếu các bạn bắt gặp lỗi sai links, content sai, hay như là 1 lỗi bất cứ nào kia bên trên trang này thì hãy cho chính mình biết nhé. Cám ơn bạn!
