将对象传递给子反应组件的问题

Question

我正在使用 React，目前我需要显示一个 html 列表，在 LocationFinderList 我正在初始化 Location 元素但是 Location 没有得到对象并且相反，我只得到数字属性，如图所示。

如何修复我的脚本 Location show the name for an object passe fromLocationFinderList`？

可能是传播运算符的问题？

注意：locations 中的位置 LocationFinderList 中的对象被定义为对象的属性，而不是数组中的项目。

{
                2643743: {
                    name: "London",
                    country: "GB"
                },
                4119617: {
                    name: "London",
                    country: "US"
                }
}

import React, { PropTypes } from 'react';
import Location from './Location';

const LocationFinderList = ({ locations, onLocationClick }) => (
    <ul>
        {Object.keys(locations).map((location, index) =>
            <Location
                key={index}
                {...location}
                onClick={() => onLocationClick(location.id)}
            />
        )}
    </ul>
);

export default LocationFinderList;

import React, { PropTypes } from 'react';

const Location = ({ onClick, location }) => (
    <li
        onClick={onClick}
    >
        {location}
    </li>
)

export default Location;

Answer 1

由于您使用 Object.keys 进行映射，因此您将获得密钥，因此如果您想传递对象，则需要像 locations[location]

一样传递它

将您的代码更改为

const LocationFinderList = ({ locations, onLocationClick }) => (
    <ul>
        {Object.keys(locations).map((location, index) =>
            <Location
                key={index}
                {...locations[location]}
                onClick={() => onLocationClick(location)}
            />
        )}
    </ul>
);

和

const Location = ({ onClick, name, country}) => (
    <li
        onClick={onClick}
    >
        {name}
    </li>
)

Answer 2

改变 {...地点}

到 {...位置[位置]}

将对象传递给子反应组件的问题

Issue with passing object to child react componenet

javascript

ecmascript-6

reactjs

react-redux