[英]Passing object as props to jsx. Without {...obj}
我有一個來自 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
/>
)
})
因為我想創建通用組件,它可以有 'n 個鍵值屬性。 所以在 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>
在商店中,我有一個帶有對象的數組。 每個對象都有自己的屬性。 此連接工作正常
更新
減速器:
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
};
};
編輯:你正在做一個地圖兩次你傳遞給你的 MyComponent 是你完整數組的一個元素。 刪除此級別上的地圖。 將完整數組傳遞給 MyComponent
return (
<MyComponent
name={prof.name}
custmProps
custmProps
custmProps
arrayRows={this.props.blocks.profiles} // here you want this
/>
)
您可以像傳遞任何其他道具一樣將整個對象作為道具傳遞:
<MyComponent
rows={arrayRows}
/>
並像這樣訪問它:
const MyComponent = ({rows}) => {
console.log(rows);
return null;
}
無需對其進行解構。 您仍然可以通過這種方式訪問您的鍵值對。
最 ES6 的方式是:對象將與道具同名,而不是:
return (
<MyComponent
name={prof.name}
custmProps
custmProps
custmProps
arrayRows // here what you need
/>
)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.