在 React 中迭代 JSON答案

【问题标题】：Iterating over JSON in React在 React 中迭代 JSON
【发布时间】：2017-11-02 16:57:18
【问题描述】：

我有以下代码：

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 的组件？

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

<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。

【讨论】：

【解决方案2】：

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')
);

【讨论】：

【解决方案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>
        )
    }
}

【讨论】：

【解决方案4】：

除了@Dan 的答案，我认为其他答案对您没有任何帮助/有用，因为它们不会遍历您的 JSON 对象。

要正确执行此操作，您需要遍历 JSON 对象中的每个键。有几种方法可以做到这一点，其中之一是使用Object.keys()。就像下面的代码 sn-p。

此解决方案遍历 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>

【讨论】：

【解决方案5】：

//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>

【讨论】：