React 属性
属性是传递给 React 组件的参数。
属性通过 HTML 属性传递给组件。
props 代表属性。
React 属性
React 属性类似于 JavaScript 中的函数参数 *以及* HTML 中的属性。
要将属性发送到组件，请使用与 HTML 属性相同的语法
示例
向 Car 元素添加 "brand" 属性
const myElement = <Car brand="Ford" />;组件将参数接收为 props 对象
传递数据
属性也是将数据从一个组件传递到另一个组件（作为参数）的方式。
示例
从 Garage 组件发送 "brand" 属性到 Car 组件
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 />);
如果您要发送一个变量，而不是像上面示例中的字符串，只需将变量名放在花括号内即可
示例
创建一个名为 carName 的变量并将其发送到 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 />);
或者如果它是一个对象
示例
创建一个名为 carInfo 的对象并将其发送到 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 />);
注意：React 属性是只读的！如果您尝试更改其值，将会出现错误。
