React Props
Props 是传递给 React 组件的参数。
Props 通过 HTML 属性传递给组件。
props 代表属性。
React Props
React Props 类似于 JavaScript 中的函数参数 和 HTML 中的属性。
要将 props 发送到组件，请使用与 HTML 属性相同的语法：
例子
为 Car 元素添加“品牌”属性：
const myElement = <Car brand="Ford" />;组件接收参数作为 props 目的：
传递数据
Props 也是你将数据作为参数从一个组件传递到另一个组件的方式。
例子
将“品牌”属性从车库组件发送到汽车组件：
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 Props 是只读的！如果你尝试更改其值，则会出现错误。
