Đạo cụ phản ứng
Đạo cụ là các đối số được truyền vào các thành phần React.
Đạo cụ được chuyển đến các thành phần thông qua thuộc tính HTML.
props là viết tắt của thuộc tính.
Đạo cụ phản ứng
Đạo cụ phản ứng giống như các đối số hàm trong JavaScript và các thuộc tính trong HTML.
Để gửi props vào một thành phần, hãy sử dụng cú pháp tương tự như thuộc tính HTML:
Ví dụ
Thêm thuộc tính "thương hiệu" vào thành phần Xe hơi:
const myElement = <Car brand="Ford" />; Thành phần này nhận đối số dưới dạng đối tượng props :
Ví dụ
Sử dụng thuộc tính thương hiệu trong thành phần:
function Car(props) { return <h2>I am a { props.brand }!</h2>; }Được chứng nhận!
$95 ĐĂNG KÝ
Truyền dữ liệu
Đạo cụ cũng là cách bạn truyền dữ liệu từ thành phần này sang thành phần khác, dưới dạng tham số.
Ví dụ
Gửi thuộc tính "thương hiệu" từ thành phần Nhà để xe đến thành phần Xe hơi:
function Car(props) { return <h2>I am a { props.brand }!</h2>; } function Garage() { return ( <> <h1>Who lives in my garage?</h1> <Car brand="Ford" /> </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Garage />);Nếu bạn có một biến cần gửi chứ không phải một chuỗi như trong ví dụ trên, bạn chỉ cần đặt tên biến trong dấu ngoặc nhọn:
Ví dụ
Tạo một biến có tên carName và gửi nó đến thành phần Car :
function Car(props) { return <h2>I am a { props.brand }!</h2>; } function Garage() { const carName = "Ford"; return ( <> <h1>Who lives in my garage?</h1> <Car brand={ carName } /> </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Garage />);Hoặc nếu nó là một đối tượng:
Ví dụ
Tạo một đối tượng có tên carInfo và gửi nó đến thành phần Car :
function Car(props) { return <h2>I am a { props.brand.model }!</h2>; } function Garage() { const carInfo = { name: "Ford", model: "Mustang" }; return ( <> <h1>Who lives in my garage?</h1> <Car brand={ carInfo } /> </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Garage />);Lưu ý: React Props ở chế độ chỉ đọc! Bạn sẽ gặp lỗi nếu cố gắng thay đổi giá trị của chúng.
