将对象作为道具传递给 jsx答案

【问题标题】：Passing object as props to jsx将对象作为道具传递给 jsx
【发布时间】：2021-07-12 18:56:54
【问题描述】：

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

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

我希望它作为传递单个道具的功能：

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

这可能吗？

【问题讨论】：

【解决方案1】：

这可能吗？

是的，可能，但您发送它的方式不正确。

<MyJsx commonProps />的含义是：

<MyJsx commonProps={true} />

因此，如果您不指定任何值，默认情况下它将采用true。要传递对象，你需要这样写：

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

更新：

如果你有一个对象，并且想将所有属性作为单独的 prop 传递，可以这样写：

<MyJsx {...commonProps} />

【讨论】：

【解决方案2】：

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

你可以简单地做<MyJsx {...commonProps} />

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

【讨论】：

【解决方案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'}]} />

【讨论】：

【解决方案4】：

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

const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};

1.使用展开运算符：-

<MyJsx {...commonProps} />

2.只需传递该道具：-

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

【讨论】：

【解决方案5】：

也可以这样做：

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

这样就不用写prop1: prop1了（如果是变量或者函数比如statesetState）。

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

【讨论】：