我有一个包含多个常见键-值属性的对象,我想将其传递给一些jsx。
const commonProps = {myProp1: 'prop1',myProp2: 'prop2'}; <MyJsx commonProps />
我想让它作为传递单个 prop :
<MyJsx myProp1={commonProps.myProp1} myProp2={commonProps.myProp2}/>
这可能吗?
iklwldmw1#
这可能吗?是的,有可能,但是您发送邮件的方式不正确。<MyJsx commonProps />的含义是:
<MyJsx commonProps />
<MyJsx commonProps={true} />
所以如果你不指定任何值,默认情况下它会取true.要传递这个对象,你需要这样写:
true
const commonProps = {myProp1: 'prop1',myProp2: 'prop2'}; <MyJsx commonProps={commonProps} />
如果你有一个对象,并希望传递所有的属性作为单独的prop,写它如下:
<MyJsx {...commonProps} />
u7up0aaq2#
可以使用传播运算符来执行此操作。您可以简单地执行<MyJsx {...commonProps} />现在,commonProps中的所有单个属性都将作为单个属性发送到MyJsx。
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'}]} />
u1ehiz5o4#
您可以通过两种方式将 prop 作为对象传递:-常量公共属性= {myProp 1:“属性1”,我的属性2:'prop2'};1.使用传播运算符:-
2.简单地传递 prop :-
<MyJsx commonProps = {commonProps ? commonProps : true} />
1mrurvl15#
也可以这样做:
<MyJsx objectProps={{ prop1, prop2 }}/>
这样就不必写prop1: prop1(如果它是一个变量或函数,如statesetState)。然后可以在组件中使用解构来访问它:let { prop1, prop2 } = props.objectProps
prop1: prop1
state
setState
let { prop1, prop2 } = props.objectProps
pkbketx96#
const object={name:'xyz',age:50}
使用双大括号,如下所示
<Message {{object}}/>
function Message({object}){ //You can get object here.// }
6条答案
按热度按时间iklwldmw1#
这可能吗?
是的,有可能,但是您发送邮件的方式不正确。
<MyJsx commonProps />
的含义是:所以如果你不指定任何值,默认情况下它会取
true
.要传递这个对象,你需要这样写:如果你有一个对象,并希望传递所有的属性作为单独的prop,写它如下:
u7up0aaq2#
可以使用传播运算符来执行此操作。
您可以简单地执行
<MyJsx {...commonProps} />
现在,commonProps中的所有单个属性都将作为单个属性发送到MyJsx。
6jygbczu3#
您需要使用双大括号,如下所示:
或者传递许多对象:
它只是括号内的JS语法。
最后一个组件可能如下所示
u1ehiz5o4#
您可以通过两种方式将 prop 作为对象传递:-
常量公共属性= {myProp 1:“属性1”,我的属性2:'prop2'};
1.使用传播运算符:-
2.简单地传递 prop :-
1mrurvl15#
也可以这样做:
这样就不必写
prop1: prop1
(如果它是一个变量或函数,如state
setState
)。然后可以在组件中使用解构来访问它:
let { prop1, prop2 } = props.objectProps
pkbketx96#
使用双大括号,如下所示