Blog

React props 传递数据

2024-06-08 11:13PM

参考：https://www.w3schools.com/react/react_props.asp

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

eg：

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

2. 如果想要发送变量，而不是如上例子中的字符串，则只需要将变量名称放在大括号内即可：

eg：

创建一个列子名为 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 />);

3.如果“brand”是一个对象：

eg：

创建一个名为 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 是只读的！如果您尝试更改它们，您将收到错误消息价值。

返回>>

请登录后再发表评论。

评论列表:

目前还没有人发表评论