Props là gì?

Tái sử dụng một thành phần rất tiện, nhưng ba ngôi sao giống hệt nhau thì chỉ hữu ích ở mức độ nhất định. Props cho phép bạn truyền dữ liệu vào một thành phần, để mỗi bản sao có thể khác nhau:

function Greeting({ name }) {
    return <p>Hello, {name}!</p>;
}

export default function App() {
    return (
        <div>
            <Greeting name="Ada" />
            <Greeting name="Alan" />
        </div>
    );
}

Ở đây có hai việc xảy ra:

• Truyền: props trông giống như thuộc tính: name="Ada"
• Nhận: component giải nén chúng trong danh sách tham số ({ name }) và dùng chúng trong JSX như mọi biến khác

Cùng một component, dữ liệu khác nhau, đầu ra khác nhau: Chào Ada! và Chào Alan!. Props là cách component cha cấu hình component con.