[英]Iterating over JSON in React
我有以下代码:
export class Highlights extends React.Component {
render() {
return (
<div>
{JSON.stringify(this.props.highlights_data.data)}
</div>
)
}
}
这将打印出以下内容:
{"active":{"label":"Active","value":"12"},"automatic":{"label":"Automatic","value":"8"},"waiting":{ "label":"Waiting","value":"1"},"manual":{"label":"Manual","value":"3"}}
如何遍历highlights_data.data
道具以调用另一个传递label
和value
组件?
除了@Dan 的回答,我认为其他答案对您没有任何帮助/有用,因为它们不会遍历您的 JSON 对象。
要正确执行此操作,您需要遍历 JSON 对象中的每个键。 有几种方法可以做到这一点,其中之一是使用Object.keys()
。 就像下面的代码片段。
此解决方案遍历 JSON 对象中的每个键并将其推送到数组中。 一旦你有了这个数组,你就可以像往常一样用map()
遍历它,并将你的相关道具传递给另一个子组件。:
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>
export class Highlights extends React.Component {
render() {
const { data } = this.props.highlights_data;
return (
<div>
{
Object.keys(data).map((e, i) => {
<SomeComponent key={i} {...e} />
});
}
</div>
)
}
}
<div>
{this.props.highlights_data.data.map((e, i) =>
<SomeComponent key={i} label={e.label} value={e.value} />
)}
</div>
您可以直接发送项目本身。
<SomeComponent key={i} item={e} />
并使用props.item.label
或props.item.value
访问孩子中的label
和value
。
//let myJSON={"attr1":"abcdef", "attr2":"12345", "attr3":"hello"}; <p> {Object.keys(myJSON).map((innerAttr, index) => { return ( <span key={index}> {innerAttr}: {myJSON[innerAttr]}<br/></span> )}) } </p>
var Highlight = React.createClass({
render: function() {
const {value, label} = this.props;
return <div>{label}: {value}</div>;
}
});
var Highlights = React.createClass({
render: function() {
const {active, automatic, waiting, manual} = this.props.highlights_data.data;
return (
<div>
<Highlight {...active} />
<Highlight {...automatic} />
<Highlight {...waiting} />
<Highlight {...manual} />
</div>
);
}
});
const data = {data:{"active":{"label":"Active","value":"12"},"automatic":{"label":"Automatic","value":"8"},"waiting":{"label":"Waiting","value":"1"},"manual":{"label":"Manual","value":"3"}}};
ReactDOM.render(
<Highlights highlights_data={data} />,
document.getElementById('container')
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.