码农教程 - 一技在手,衣食无忧! tools

React Props

❮ 上一节 下一节 ❯

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

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

props代表属性。

React Props

React Props 就像 JavaScript 中的函数参数和HTML 中的属性。

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

示例

将 "brand" 属性添加到 Car 元素：

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

该组件接收参数作为props目的：

示例

在组件中使用品牌属性：

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 的变量并将其传递给 Person 组件。

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

开始练习

❮ 上一节 下一节 ❯