React 道具

Props 是传递给 React 组件的参数。

Props 通过 HTML 属性传递给组件。

props 代表属性。


React 道具

React Props 类似于 JavaScript 中的函数参数 HTML 中的属性。

要将 props 发送到组件中,请使用与 HTML 属性相同的语法:

实例

向 Car 元素添加"brand"属性:

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

组件接收参数作为 props 对象:

实例

在组件中使用brand品牌属性:

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

运行实例 »


传递数据

Props 也是您将数据从一个组件传递到另一个组件的方式,作为参数。

实例

将 "brand" 属性从 Garage 组件发送到 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 Props 是只读的! 如果你试图改变它们的值,你会得到一个错误。


学习训练

练习题:

创建一个名为 name 的变量并将其传递给 Message 组件。

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

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Greeting />);

开始练习