React Props
1.React Props là gì?
Props trong React là viết tắt của Properties.Nó là một đối số (Arguments) dùng để truyền vào Component trong React.
Các thành phần Component trong React sử dụng các thuộc tính props để giao tiếp với nhau.Mỗi thành phần Cha (Parent Component) có thể truyền một số thông tin đến các thành phần con (Child Component) bằng cách truyền qua các thuộc tính props.
Props truyền vào Component thông qua thuộc tính props.Giá trị truyền vào props có thể là các giá trị hoặc các đối tượng hoặc các mảng…
Bạn có thể hiểu React Props nó giống như các đối số trong hàm Javascript và các thuộc tính trong HTML.
2.Cách sử dụng Props trong React.
Sau đây là một số ví dụ về cú pháp và cách sử dụng đối số props và component trong React.
Cú pháp truyền props vào component trong React.
Ví dụ
function Employee(props){
return(
<p>Tên tôi là : { props.Name } </p>
);
}
Như các bạn có thể thấy props trong ví dụ ở trên nó tương tự như đối số truyền vào một hàm.
Hàm function Employee được truyền vào với đối số là props và có thuộc tính là Name.Nó có nghĩa là tạo một hàm Employee có thuộc tính là Name để bạn có thể gán giá trị cho tên nhân viên.
Cách gán giá trị trực tiếp vào thuộc tính props trong React.
Ví dụ
function Show_EmployeeInfo(){
return(
<div>
<h2>Cách sử dụng props trong React </h2>
<h3>Ví dụ:</h3>
<Employee Name = "Hoàng Văn Lưu" />
</div>
);
}
Cách gán giá trị vào thuộc tính thông qua sử dụng biến (variable) trong React.
Ví dụ
function Show_EmployeeInfo(){
const v_name = "Hoàng Văn Lưu";
return(
<div>
<h2>Cách sử dụng props trong React </h2>
<h3>Ví dụ:</h3>
<Employee Name = {v_name} />
</div>
);
}
Cách truyền nhiều đối số vào Component trong React.
Ví dụ
function Employees({Name, Age, Phone})
{
return (
<div>
<p>Họ tên: {Name}</p>
<p>Tuổi: {Age}</p>
<p>Số điện thoại: {Phone}</p>
</div>
);
}
Cách gán nhiều giá trị vào nhiều thuộc tính trong React sử dụng đối tượng (Objects).
Ví dụ
function Show_Employees(){
const o_emp = {name: "Hoàng Văn Lưu", age: "38", phone: "0973551833"};
return (
<div>
<h2>Thông Tin Nhân Viên</h2>
<Employees Name={o_emp.name} Age={o_emp.age} Phone={o_emp.phone} />
</div>
)
}
Để hiểu hơn về toàn bộ nộ dung mà chúng tôi đề cập ở trên bạn viết hoặc copy source code của trang Props_Demo.js dưới đây và chạy thử để xem kết quả.
Soure Code React Props như sau:
Ví dụ