在React中迭代JSON

Question

我有以下代码:

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

这打印出以下内容:

{ "活性":{ "标签": "活跃", "值": "12"}, "自动":{ "标记": "自动", "值": "8"}, "等待":{ "标签": "等待", "值": "1"}, "手动":{ "标签": "手动", "值": "3"}}

我怎样才能遍历highlights_data.data道具调用另一个组件传承label和value？

Answer 1

除了@ 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>

Answer 2

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

您可以直接发送物品本身。

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

并在子项中使用or访问labeland 。valueprops.item.labelprops.item.value

Answer 3

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