HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

React Props

❮ Trước Kế tiếp ❯

Props 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 các thuộc tính HTML.

propslà viết tắt của thuộc tính.

React Props

React Props giống như các đối số hàm trong JavaScript và các thuộc tính trong HTML.

Để gửi các đạo cụ vào một thành phần, hãy sử dụng cú pháp giống như các thuộc tính HTML:

Thí dụ

Thêm thuộc tính "thương hiệu" vào phần tử Xe:

const myelement = <Car brand="Ford" />;

Thành phần nhận đối số như một propsđối tượng:

Thí 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>;
}

w3schools CERTIFIED . 2022

Được chứng nhận!

Hoàn thành các mô-đun React, làm bài tập, làm bài kiểm tra và được chứng nhận w3schools !!

$ 95 GHI DANH

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 các tham số.

Thí dụ

Gửi thuộc tính "thương hiệu" từ thành phần Nhà để xe đến thành phần Xe:

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand="Ford" />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Nếu bạn có một biến để gửi chứ không phải là một chuỗi như trong ví dụ trên, bạn chỉ cần đặt tên biến bên trong dấu ngoặc nhọn:

Thí dụ

Tạo một biến có tên carNamevà gửi nó đến Carthành phần:

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 } />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Hoặc nếu đó là một đối tượng:

Thí dụ

Tạo một đối tượng có tên carInfovà gửi nó đến Carthành phần:

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 } />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Lưu ý: React Props ở chế độ chỉ đọc! Bạn sẽ gặp lỗi nếu cố thay đổi giá trị của chúng.

Kiểm tra bản thân với các bài tập

Bài tập:

Tạo một biến có tên là tên và chuyển nó vào thành phần Message.

function Person(props) {
  return <h2>I'm { props.name }!</h2>;
}

function Greeting() {
  const name = "Jesse"
  return (
    <>
      <h1>Hello!</h1>
      <Person name= name  />
    </>
  );
}

ReactDOM.render(<Greeting />, document.getElementById('root'));

❮ Trước Kế tiếp ❯