我有要尝试呈现为列表的JSON数据。
[{
"id": "1",
"name": "Bill"
}, {
"id": "2",
"name": "Sarah"
}]
我试图显示数据，以便我将数据的标题和id作为参数从Parent类传递给Child类，后者将数据打印为列表。
export default class Parent extends Component {
render() {
return (
<div>
<Child
title={"Group 1"}
options={this.props.data.name}
/>
</div>
);
}
}
这是我的孩子班：
export default class Child extends Component {
render() {
var data=this.props;
var title=this.props.title;
var name=this.props.name;
return (
<ul>
<h4>{title}</h4>
<div>{this.props.map(item=>
<li>{name}</li>
)}
</div>
</ul>
);
}
}
我不明白的是如何在Child类中使用map来显示数据。我知道我不应该写this.props.map(item=>。我是React的新手，希望能为解决此问题提供帮助。
让我们不要在孩子中使用地图...试试这个：
let data = [{
"id": "1",
"name": "Bill"
}, {
"id": "2",
"name": "Sarah"
}]
map父组件中的用户：
export default class Parent extends Component {
render() {
return (
<div>
<div>Group 1</div>
<ul>
{data.map(item => <Child
options={item}
/>)}
</ul>
</div>
);
}
}
增强子组件：
export default class Child extends Component {
render() {
let {options:{name}} = this.props
return (
<li>{name}</li>
);
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句