将对象作为道具传递给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运算符来执行此操作.

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} />