Question

可以使用以下内容呈现包含道具a和b的组件：

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

可以传递一个包含道具作为键的对象吗？

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

若然，怎么样？

Answer 1

不确定。请务必使用spread syntax。每the React documentation：

传播属性

如果您已将props作为对象，并且想要在JSX中传递它，则可以使用...作为＆＃34;传播＆＃34; operator传递整个props对象。这两个组件是等效的：
function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}
在构建通用容器时，Spread属性非常有用。但是，他们也可以通过简单地将大量不相关的道具传递给不关心它们的组件来使代码变得混乱。我们建议您谨慎使用此语法。

您可以将此扩展语法用于这种情况，因为您将道具传播到组件＆＃34;。它是这样应用的，尽管谨慎使用：

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

以上等于分别传递道具：

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

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

1 个答案:

传播属性