除了@Dan的答案,我认为其他答案对您没有帮助/有用,因为它们不会遍历您的JSON对象。
为了正确执行此操作,您需要遍历JSON对象中的每个键。您可以通过几种方法来执行此操作,其中之一是使用
Object.keys()。像下面的代码片段。
此解决方案遍历JSON对象中的每个键,并将其推入数组。一旦有了该数组,就可以
map()像往常一样使用遍历它,并将相关的props传递给另一个子组件。
class MyApp extends React.Component { render() { var json = {"active":{"label":"Active","value":"12"},"automatic":{"label":"Automatic","value":"8"},"waiting":{"label":"Waiting","value":"1"},"manual":{"label":"Manual","value":"3"}}; var arr = []; Object.keys(json).forEach(function(key) { arr.push(json[key]); }); return <ul>{arr.map(item => <MyAppChild key={item.label} label={item.label} value={item.value} />)}</ul>; }}class MyAppChild extends React.Component { render() { return <li>{this.props.label + " - " + this.props.value}</li>; }}ReactDOM.render(<MyApp />, document.getElementById('myapp'));<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="myapp"></div>


