[英]Passing object as props to jsx. Without {...obj}
I have an array from redux我有一个来自 redux 的数组
let profiles = this.props.blocks.profiles.map(prof => {
let arrayRows = {
name: prof.name,
version: prof.version,
description: prof.description,
community: prof.community
}
return (
<MyComponent
name={prof.name}
custmProps
custmProps
custmProps
{...arrayRows} // here I don't want this
// I need object, which contains key-value from arrayRows
/>
)
})
Because I want to create universal component, which can have 'n key-value prop with.因为我想创建通用组件,它可以有 'n 个键值属性。 So in MyComponent I have smt like this:
所以在 MyComponent 我有这样的 smt:
<myComponent>
{this.props.title /* every component must have this */}
{this.props.id /* every component must have this */}
{this.props.arrayRows.map(arr => {
return (
<BlockRow
blockRowName={arr.key} // here: name || version || description || community || ...
blockRowVal={arr.val} // here: name.val || version.val || description.val || community.val || ...
/>
)
})}
</myComponent>
In Store I have array with objects.在商店中,我有一个带有对象的数组。 Each object have his own properties.
每个对象都有自己的属性。 This connection works fine
此连接工作正常
UPDATE更新
Reducer:减速器:
const initialState = {
profiles: [
{
id: '1',
name: 'Profile 1',
version: '23',
description: 'description',
community: 'community'
},
{
id: '2',
name: 'Profile 2',
version: '23',
description: 'description',
community: 'community'
}
]
}
const mapStateToProps = state => {
return {
blocks: state.myReducer
};
};
Edit: you are doing a map twice What you are passing to your MyComponent is an element of your full array.编辑:你正在做一个地图两次你传递给你的 MyComponent 是你完整数组的一个元素。 Remove the map that's on this level.
删除此级别上的地图。 Pass the full array to MyComponent
将完整数组传递给 MyComponent
return (
<MyComponent
name={prof.name}
custmProps
custmProps
custmProps
arrayRows={this.props.blocks.profiles} // here you want this
/>
)
You can just pass down an entire object as props as you would any other prop:您可以像传递任何其他道具一样将整个对象作为道具传递:
<MyComponent
rows={arrayRows}
/>
And access it like this:并像这样访问它:
const MyComponent = ({rows}) => {
console.log(rows);
return null;
}
There is no need to de-structure it.无需对其进行解构。 You will still be able to access your key-value pairs this way.
您仍然可以通过这种方式访问您的键值对。
The most ES6 way is: the object will have the same name as the prop, than:最 ES6 的方式是:对象将与道具同名,而不是:
return (
<MyComponent
name={prof.name}
custmProps
custmProps
custmProps
arrayRows // here what you need
/>
) )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.