Javascript 在React中迭代JSON

我有以下代码：

export class Highlights extends React.Component {
    render() {
        return (
            <div>
                {JSON.stringify(this.props.highlights_data.data)}
            </div>
        )
    }
}

导出类突出显示扩展的React.Component{
render（）{
返回(
{JSON.stringify（this.props.highlights_data.data）}
)
}
}

这将打印出以下内容：

{“活动”：{“标签”：“活动”，“值”：“12”}，“自动”：{“标签”：“自动”，“值”：“8”}，“等待”：{“标签”：“等待”，“值”：“1”}，“手动”：{“标签”：“手动”，“值”：“3”}

我如何迭代

突出显示\u data.data

道具来调用另一个传递

标签和
值的组件？

<div>
  {this.props.highlights_data.data.map((e, i) => 
    <SomeComponent key={i} label={e.label} value={e.value} />
  )}
</div>

{this.props.highlights_data.data.map（（e，i）=>
)}

你可以直接把物品寄进来

<SomeComponent key={i} item={e} />



并使用
props.item.label
或
props.item.value
在子对象中访问
label
和
value
 
var Highlight=React.createClass({
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')
);

render:function（）{
const{value，label}=this.props；
返回{label}:{value}；
}
});
var Highlights=React.createClass({
render:function（）{
const{active，automatic，waiting，manual}=this.props.highlights_data.data；
返回(
);
}
});
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(
,
document.getElementById（'容器'）
);
导出类突出显示扩展的React.Component{
render（）{
const{data}=this.props.highlights\u数据；
返回(
{
Object.keys（data.map）（e，i）=>{
});
}
)
}
}
除了@Dan的答案，我不相信其他答案对您有任何帮助/有用，因为它们不会遍历您的JSON对象

要正确执行此操作，您需要迭代JSON对象中的每个键。有几种方法可以做到这一点，其中之一是使用
Object.keys（）
。就像下面的代码片段一样

此解决方案迭代JSON对象中的每个键，并将其推送到数组中。一旦你拥有了这个数组，你可以像平常一样用
map（）
遍历它，并将你的相关道具传递给另一个子组件：


MyApp类扩展了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（函数（键）{
arr.push（json[key]）；
});
返回
{arr.map（item=>）}
；
}
}
类MyAppChild扩展了React.Component{
render（）{
返回
{this.props.label+“-”+this.props.value}
；
}
}
ReactDOM.render（，document.getElementById（'myapp'））


//让myJSON={“attr1”：“abcdef”，“attr2”：“12345”，“attr3”：“hello”}；

{Object.keys（myJSON）.map（（innerAttr，index）=>{
返回(
{innerAttr}:{myJSON[innerAttr]}

)})
}

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>
        )
    }
}