将对象作为道具传递给 React.js 中的组件

作者

将对象作为 props 传递给 React.js 中的组件

Pass an Object as props to a component in React.js

使用扩展语法 (…) 将对象作为 props 传递给 React 组件，例如<Person {...obj} />. spread 语法将解压对象的所有属性并将它们作为 props 传递给指定的组件。

应用程序.js
function Person({name, age, country}) {
  return (
    <div>
      <h2>{name}</h2>
      <h2>{age}</h2>
      <h2>{country}</h2>
    </div>
  );
}

export default function App() {
  const obj = {name: 'Alice', age: 29, country: 'Austria'};

  return (
    <div>
      <Person {...obj} />
    </div>
  );
}

我们使用
扩展语法 (…)
将对象的属性作为 props 传递给组件。

考虑此语法的一种简单方法是，我们在需要零个或多个键值对的地方解包对象的属性。
应用程序.js
const obj2 = {...{a: 1, b: 2}};

console.log(obj2); // 👉️ {a: 1, b: 2}

现在Person组件可以解构并使用所有传递的 props。

如果将整个对象作为 prop 传递，则必须访问子组件中对象的属性。

应用程序.js
function Person({data}) {
  return (
    <div>
      <h2>{data.name}</h2>
      <h2>{data.age}</h2>
      <h2>{data.country}</h2>
    </div>
  );
}

export default function App() {
  const obj = {name: 'Alice', age: 29, country: 'Austria'};

  return (
    <div>
      <Person data={obj} />
    </div>
  );
}

请注意，Person组件现在可以访问data
对象的属性。

你可以通过在它的 props 对象中解构更深一层来解决这个问题。

应用程序.js
function Person({data: {name, age, country}}) {
  return (
    <div>
      <h2>{name}</h2>
      <h2>{age}</h2>
      <h2>{country}</h2>
    </div>
  );
}

export default function App() {
  const obj = {name: 'Alice', age: 29, country: 'Austria'};

  return (
    <div>
      <Person data={obj} />
    </div>
  );
}

现在我们不必访问对象的每个属性，data即使父组件将整个对象作为 prop 传递也是如此。

如果您的对象未存储在变量中并以内联方式传递，则在将对象作为 prop 传递时，您将有两组花括号。

应用程序.js
function Person({data}) {
  return (
    <div>
      <h2>{data.name}</h2>
      <h2>{data.age}</h2>
      <h2>{data.country}</h2>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <Person data={{name: 'Alice', age: 29, country: 'Austria'}} />
    </div>
  );
}

外层的大括号包裹着表达式，内层的大括号是实际的对象属性。

您还可以将对象的各个属性作为 props 传递给子组件。

应用程序.js
function Person({name, age, country}) {
  return (
    <div>
      <h2>{name}</h2>
      <h2>{age}</h2>
      <h2>{country}</h2>
    </div>
  );
}

export default function App() {
  const obj = {name: 'Alice', age: 29, country: 'Austria'};

  return (
    <div>
      <Person name={obj.name} age={obj.age} country={obj.country} />
    </div>
  );
}

这样做的好处是——您可以省略一些子组件中不需要的对象属性。

–