在 React 中迭代 JSON

Question

我有以下代碼：

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組件？

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

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

Answer 3

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

Answer 4

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

Answer 5

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