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

【问题标题】：Issue with passing object to child react componenet将对象传递给子反应组件的问题
【发布时间】：2017-04-02 08:48:01
【问题描述】：

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

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

可能是扩展运算符的问题？

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

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

【问题讨论】：

标签： javascript reactjs ecmascript-6 react-redux

【解决方案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>
)

【讨论】：

【解决方案2】：

改变 {...地点}

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

【讨论】：