将对象作为道具传递给jsx

Question

我有一个对象包含多个常见的键值道具，我想传递给一些jsx。像这样的东西：

const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps />

我希望这个功能可以传递个别道具：

<MyJsx myProp1={commonProps.myProp1} myProp2={commonProps.myProp2}/>

这可能吗？

Answer 1

这可能吗？

是的，为什么你认为它不可能，但你发送的方式是不正确的。

<MyJsx commonProps />的含义是：

<MyJsx commonProps={true} />

因此，如果您在默认情况下未指定任何值，则需要使用true。要传递对象，您需要像这样写：

const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps={commonProps} />

更新：

如果你有一个对象并希望将所有属性作为单独的prop传递，请按如下方式编写：

<MyJsx {...commonProps} />

Answer 2

您可以使用spread operator执行此操作。

You can simply do <MyJsx {...commonProps} />

现在，您在commonProps中拥有的所有单个属性将作为单独的道具发送到MyJsx

Answer 3

你需要使用双括号，如下所示：

messages={{tile:'Message 1'}}

或者传递许多对象：

messages={[{title:'Message 1', name: 'Andrew'}, {title:'Message 2', name: 'Greg'}]}

它只是括号内的JS语法。

最终组件可能如下所示

<Chat title="Some str" messages={[{title:'Message 1', name: 'Andrew'}, {title:'Message 2', name: 'Greg'}]} />

Answer 4

您可以通过两种方式将道具作为对象传递： -

const commonProps = {myProp1：'prop1'，myProp2：'prop2'};

1.使用传播运营商： -

<MyJsx {...commonProps} />

2.简单地传递道具： -

<MyJsx commonProps = {commonProps ? commonProps : true} />