我目前正在使用react来渲染名为arrays
的道具,如下所示:
area
更新2 -
WORKS :
[{
"id": 1,
"name": "Europe",
"Countries": [{
"id": 1,
"name": "Iceland",
"Cities": [{
"id": 1,
"name": "Selfoss"
}]
}, {
"id": 2,
"name": "Switzerland",
"Cities": [{
"id": 2,
"name": "Geneva"
}]
}]
}, {
"id": 2,
"name": "Asia",
"Countries": [{
"id": 3,
"name": "Japan",
"cities": [{
"id": 3,
"name": "Yokohama"
}]
}]
}]
输出:
class AreaBar extends Component {
constructor(props) {
super(props);
}
.....
renderCountries() {
return(
<div>
This is the country
</div>
)
}
renderContinents() {
return(
<div>
This is the continent
{this.renderCountries()}
</div>
)
}
render() {
return(
<div>
{this.renderContinents()}
</div>
);
}
}
合并地图, WORKS
This is the continent
This is the country
输出:
renderContinents(area) {
return(
<div>
{area.name}
</div>
)
}
render() {
return(
<div>
{this.props.areas.map(this.renderContinents)}
</div>
);
}
}
但当我加入 Europe
Asia
时,它不输出任何内容,我认为这就是为什么我无法得到建议。
{this.renderCountries()}
在Firefox上,两个大洲都出现了,但“这是一个国家没有出现”而是我得到了
renderCountries() {
return(
<div>
This is the country
</div>
)
}
renderContinents(area) {
return(
<div>
{area.name}
{this.renderCountries()}
</div>
)
}
render() {
return(
<div>
{this.props.areas.map(this.renderContinents)}
</div>
);
}
}
好像它说renderCountries永远不能运行。我对此仍然有点困惑,但我想我会尝试分离组件,看看它是否解决了这个问题。
答案 0 :(得分:2)
两件事:
1)在您问题的第二段代码中,您正在执行area.countries.map
。 area
对象上的密钥称为Countries
,而不是countries
。 area.countries
应该是未定义的。
2)area.Countries
是一个对象数组,就像你在问题中所说的那样。所以是的,你可以很好地映射它们。问题是每个Country
都是一个对象,因此,您尝试将对象渲染为<div>
函数中renderCountries
的子对象。如果您只想显示国家/地区的名称,则应执行以下操作:
renderCountries(country){
return(
<div>
{country.name}
</div>
)
}
然后你会看到一些有意义的输出。
答案 1 :(得分:2)
您输错了,请使用area.Countries
代替area.countries
此外,我认为您应该至少创建3个组件:Area
,Country
和City
。然后你可以像这样呈现数据(请注意我使用ES6语法):
var areas = [/* array you posted above*/];
// in your top-level component
render() {
return (<div>
{areas.map((area) => {
return <Area data={area}/>;
})}
</div>);
}
// Area component
export function Area({data}) {
render() {
return (<div>
Area name: {data.name}
{data.Countries.map((country) => {
return <Country data={country}/>
})}
</div>);
}
}
// Country component
export function Country({data}) {
render() {
return (<div>
Country: {data.name}
{data.Cities.map((city) => {
return <City data={city}/>
})}
</div>);
}
}
// City component
export function City({data}) {
render() {
return (<div>
City: {data.name}
</div>);
}
}