将对象作为道具传递给 jsx

我有一个包含多个公共键值道具的对象，我想把它们传递给一些 jsx。就像这样:

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

我想让它作为传递个人道具的工具:

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

这可能吗？

164576 次浏览
小开
最佳答案

这可能吗？

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

<MyJsx commonProps />的意思是:

<MyJsx commonProps={true} />

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

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

更新:

如果你有一个对象并且想把所有的属性作为独立的道具传递，那么这样写:

<MyJsx {...commonProps} />
小开

您可以使用 扩散算符扩散算符来完成此操作。

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

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

小开

你需要使用双括号，像这样:

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'}]} />
小开

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

Const commonProps = { myProp1: ‘ prop1’，myProp2: ‘ prop2’} ;

1. 使用扩展操作符:-

<MyJsx {...commonProps} />

2. 简单传递道具:-

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

也可以这样做:

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

这样，您就不必编写 prop1: prop1(如果它是一个变量或函数，如 statesetState)。

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


提交答案