如何将包含props的对象传递给React组件？

Question

道具A组分a和b可使用呈现:

<Component a={4} b={6} />

可以传递一个包含道具作为键的对象,这样的东西吗？

let componentProps = { a: 4, b: 6 }
<Component componentProps />

如果是这样,怎么样？

Answer 1

当然.确保使用扩展语法.根据React文档:

传播属性

如果您已经拥有props对象,并且想要在JSX中传递它,则可以使用..."spread"运算符来传递整个props对象.这两个组件是等效的:

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

在构建通用容器时,Spread属性非常有用.但是,它们也可以通过简单地将大量不相关的道具传递给不关心它们的组件来使代码变得混乱.我们建议您谨慎使用此语法.

您可以将此扩展语法用于此情况,因为您"将道具传播到组件".这样应用,虽然谨慎使用:

let componentProps = { a: 4, b: 6 }
<Component {...componentProps} />

以上等于分别传递道具:

<Component a={4} b={6} />