Question

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

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

传播运营商可能存在问题吗？

注意：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

更改 {... locations}

要 {...位置[位置]}

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

2 个答案: