web-dev-qa-db-ja.com

ReactでJSONを反復処理する

私は次のコードを持っています：

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を渡す別のコンポーネントを呼び出すにはどうすればよいですか？

javascriptreactjsjsx
9
davideghz

@Danの回答を除いて、他の回答はJSONオブジェクトを反復処理しないため、あなたにとって有用/有用であるとは思いません。

これを適切に行うには、JSONオブジェクトの各キーを反復処理する必要があります。これを行う方法はいくつかありますが、そのうちの1つは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>
15
Chris
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
<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にアクセスします。

4
glhrmv
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')
);
1
Giko