我正在尝试将此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的新手，非常感谢帮助解决这个问题。
答案 0 :(得分：1)
好吧，首先你必须在你的json上使用JSON.parse()，所以它变成了一个javascript对象，你还必须确保你将道具传递给你的孩子。然后，您可以这样映射：
this.props.data.map((item,i) => <li key={i}>{item.name}</li>)
答案 1 :(得分：1)
只需将您的数据作为父组件的prop传递，您就可以在子组件中访问它。
let {Component} = React;
const data = [{
"id": "1",
"name": "Bill"
}, {
"id": "2",
"name": "Sarah"
}]
class Child extends Component {
render() {
let {data, title} = this.props;
return (
<ul>
<h4>{title}</h4>
<div>{data.map(item=>
<li key={item.id}>{item.name}</li>
)}
</div>
</ul>
);
}
}
class Parent extends Component {
render() {
return (
<div>
<Child
title={"Group 1"}
data={this.props.data}
/>
</div>
);
}
}
ReactDOM.render(
<Parent data={data} />,
document.getElementById('app')
);<script src="https://unpkg.com/react@16.1.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.1.0/umd/react-dom.development.js"></script>
<div id="app"></div>
您还可以在父组件内调用map方法，并为数据渲染子组件中的每个元素调用。此外，只有li元素可以是ul的直接子元素。
let {Component} = React;
const data = [{"id": "1","name": "Bill"}, {"id": "2","name": "Sarah"}]
class Child extends Component {
render() {
let {name} = this.props;
return <li>{name}</li>
}
}
class Parent extends Component {
render() {
return (
<div>
<h1>{"Group 1"}</h1>
<ul>{this.props.data.map(item => {
return <Child key={item.id} {...item} />
})}
</ul>
</div>
);
}
}
ReactDOM.render(
<Parent data={data} />,
document.getElementById('app')
);<script src="https://unpkg.com/react@16.1.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.1.0/umd/react-dom.development.js"></script>
<div id="app"></div>
更新：对于嵌套子项，您可以React.cloneElement动态添加子节点。
let {Component} = React;
const data = [{ "id": "1", "name": "Bill" }, { "id": "2", "name": "Sarah", "childnodes": [{ "id": "3", "name": "Some name", "childnodes": [{ "id": "4", "name": "Last" }]}] }]
class Child extends Component {
render() {
let {name} = this.props;
return <li>
{name}
{this.props.children ? <ul>{this.props.children}</ul> : ''}
</li>
}
}
class Parent extends Component {
constructor(props) {
super(props);
this.renderNodes = this.renderNodes.bind(this);
}
renderNodes(data) {
return data.map(item => {
let child = <Child key={item.id} {...item} />
if(item.childnodes) {
child = React.cloneElement(child, {
children: this.renderNodes(item.childnodes)
})
}
return child;
})
}
render() {
return (
<div>
<h1>{"Group 1"}</h1>
<ul>{this.renderNodes(this.props.data)}</ul>
</div>
);
}
}
ReactDOM.render(
<Parent data={data} />,
document.getElementById('app')
);<script src="https://unpkg.com/react@16.1.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.1.0/umd/react-dom.development.js"></script>
<div id="app"></div>
答案 2 :(得分：0)
您的代码存在一些问题：
您需要将JSON对象从父级传递给子组件。如果它被称为data，那么执行：
<Child
title={"Group 1"}
options={this.props.data}
/>
我建议使用data代替options来防止混淆，但这取决于您。此外，您无法传递this.props.data.name，因为this.props.data是一个对象数组。
现在options是一个数组，我们可以正确使用map()。您试图在map()上使用this.props，这是不正确的。所以请尝试：
<div>
{this.props.map(item=>
<li>{item.name}</li>
)}
</div>
此外，<ul>元素只能将<li>作为直接子元素。您已将<h4>和<div>个元素作为其子元素。而是将它们包裹在<li>元素中。
const data = [
{
"id": "1",
"name": "Bill"
}, {
"id": "2",
"name": "Sarah"
}
];
class Parent extends React.Component {
render() {
return (
<div>
<Child
title={"Group 1"}
options={this.props.data}
/>
</div>
);
}
}
class Child extends React.Component {
render() {
var title = this.props.title;
return (
<div>
<h4>{title}</h4>
<ul>
<li>
<div>
{this.props.options.map(item=>
<li>{item.name}</li>
)}
</div>
</li>
</ul>
</div>
);
}
}
ReactDOM.render(<Parent data={data} />, document.getElementById('app'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
答案 3 :(得分：0)
让我们不要在孩子身上使用地图......试试这个：
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>
);
}
}