HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

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

开始练习

❮ 上一节 下一节 ❯