将对象作为道具传递给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} />

Answer 5

也可以这样做：

<MyJsx objectProps={{
    prop1,
    prop2
}}/>

这样您就不必编写 prop1: prop1（如果它是变量或函数，例如 state setState）。

然后可以使用解构在组件中访问它：let { prop1, prop2 } = props.objectProps