Question

我有一个来自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中，我像这样：

<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
    };
};

Answer 1

编辑：您正在做两次地图您传递给MyComponent的是整个数组的一个元素。删除此级别的地图。将完整的数组传递给MyComponent

const MyComponent = ({rows}) => {
    console.log(rows);

    return null;
}

Answer 2

您可以像传递其他道具一样将整个对象作为道具放下：

SELECT status 
from orders (CASE WHEN true THEN 'INNER JOIN runningmenus ON orders.runningmenu_id = runningmenus.id' ELSE '' END);

并像这样访问它：

<MyComponent
    rows={arrayRows}
/>

无需解构它。您仍然可以通过这种方式访问键/值对。

Answer 3

最ES6的方式是：该对象将与prop具有相同的名称，

return (
<MyComponent
    name={prof.name}
    custmProps
    custmProps
    custmProps
    arrayRows // here what you need
/>

）

将对象作为道具传递给jsx。没有{... obj}

3 个答案: