reactjs 将对象作为属性传递给jsx

ubof19bj  于 2023-01-05  发布在  React
关注(0)|答案(6)|浏览(160)

我有一个包含多个常见键-值属性的对象,我想将其传递给一些jsx。

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

我想让它作为传递单个 prop :

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

这可能吗?

iklwldmw

iklwldmw1#

这可能吗?
是的,有可能,但是您发送邮件的方式不正确。
<MyJsx commonProps />的含义是:

<MyJsx commonProps={true} />

所以如果你不指定任何值,默认情况下它会取true.要传递这个对象,你需要这样写:

const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps={commonProps} />
    • 更新日期:**

如果你有一个对象,并希望传递所有的属性作为单独的prop,写它如下:

<MyJsx {...commonProps} />
u7up0aaq

u7up0aaq2#

可以使用传播运算符来执行此操作。
您可以简单地执行<MyJsx {...commonProps} />
现在,commonProps中的所有单个属性都将作为单个属性发送到MyJsx。

6jygbczu

6jygbczu3#

您需要使用双大括号,如下所示:

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

u1ehiz5o4#

您可以通过两种方式将 prop 作为对象传递:-
常量公共属性= {myProp 1:“属性1”,我的属性2:'prop2'};
1.使用传播运算符:-

<MyJsx {...commonProps} />

2.简单地传递 prop :-

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

1mrurvl15#

也可以这样做:

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

这样就不必写prop1: prop1(如果它是一个变量或函数,如statesetState)。
然后可以在组件中使用解构来访问它:let { prop1, prop2 } = props.objectProps

pkbketx9

pkbketx96#

const object={name:'xyz',age:50}

使用双大括号,如下所示

<Message  {{object}}/>
  • 孩子 *
function Message({object}){  
    //You can get object here.//
}

相关问题