将对象作为道具传递给 jsx

Question

我有一个包含多个常用键值属性的对象，我想将其传递给某些 jsx。像这样：

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

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

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

这可能吗？

Answer 1

Is this possible?

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

<MyJsx commonProps />的含义是：

<MyJsx commonProps={true} />

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

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

更新：

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

<MyJsx {...commonProps} />

Answer 2

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

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

现在，您在 commonProps 中拥有的所有单独属性都将作为单独的 props 发送到 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.Using 传播运算符：-

<MyJsx {...commonProps} />

2.Simply传递道具：-

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

Answer 5

也可以这样做：

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

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

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

Passing object as props to jsx