我有一个对象包含多个常见的键值props，我想传递给一些 jsx。像这样的东西：
const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps />
我希望它起到传递单个props的作用：
<MyJsx myProp1={commonProps.myProp1} myProp2={commonProps.myProp2}/>
这可能吗？
将对象作为props传递给 jsx
IT技术
reactjs
jsx
react-props
2021-04-22 11:14:46
5个回答
这可能吗？
是的，它可能，但是您发送它的方式不正确。
的意思<MyJsx commonProps />是：
<MyJsx commonProps={true} />
因此，如果您不指定任何值，默认情况下它将采用true. 要传递对象，你需要这样写：
const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps={commonProps} />
更新：
如果您有一个对象并希望将所有属性作为单独的 prop 传递，请像这样编写：
<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'}]} />
您可以通过两种方式将props作为对象传递：-
const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
1.使用传播运算符：-
<MyJsx {...commonProps} />
2.简单地传递那个props：-
<MyJsx commonProps = {commonProps ? commonProps : true} />
也可以做这样的事情：
<MyJsx objectProps={{
prop1,
prop2
}}/>
这样您就不必编写prop1: prop1（如果它是一个变量或函数，例如state setState）。
然后可以使用解构在组件中访问它： let { prop1, prop2 } = props.objectProps