Javascript 在 React 中迭代 JSON

Iterating over JSON in React

提问by davideghz

I have following code:

我有以下代码：

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

This prints out the following:

这将打印出以下内容：

{"active":{"label":"Active","value":"12"},"automatic":{"label":"Automatic","value":"8"},"waiting":{"label":"Waiting","value":"1"},"manual":{"label":"Manual","value":"3"}}

{"active":{"label":"Active","value":"12"},"automatic":{"label":"Automatic","value":"8"},"waiting":{ "label":"Waiting","value":"1"},"manual":{"label":"Manual","value":"3"}}

How can I iterate over the highlights_data.dataprops to call another Component passing down labeland value?

如何遍历highlights_data.dataprops 来调用另一个向下传递的 Componentlabel和value？

回答by Chris

Except for @Dan's answer, I don't believe the other answers are any helpful/useful to you as they don't iterate through your JSON object.

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

To do this properly, you would need to iterate through each of your keys in your JSON object. There are a few ways you can do this, one of which is with Object.keys(). Like the code snippet below.

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

This solution iterates through each key in your JSON object and pushes it into an array. Once you have that array, you can iterate through it with map(), as you would normally, and pass your relevant props down to another child component.:

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

回答by Dan

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

回答by glhrmv

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

You could just send in the item itself.

您可以直接发送项目本身。

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

And access labeland valuein the child with props.item.labelor props.item.value.

和访问label和value在孩子与props.item.label或props.item.value。

回答by Giko

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