我有以下代码：
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.dataprops 来调用另一个向下传递的 Componentlabel和value？
除了@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>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} />
和访问label和value在孩子与props.item.label或props.item.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')
);