Перебор JSON в React

Question

Перебор JSON в React

У меня есть следующий код:

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?

731 4

javascript reactjs jsx

4 ответов:

Comments

Ничего не найдено.

Chris · Accepted Answer · 2017-06-01 17:10:45

За исключением ответа @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>

glhrmv · Accepted Answer · 2017-06-01 16:51:32

<div>
  {this.props.highlights_data.data.map((e, i) => 
    <SomeComponent key={i} label={e.label} value={e.value} />
  )
</div>
Вы можете просто отправить сам элемент.
<SomeComponent key={i} item={e} />
И доступ label и value в ребенке с props.item.label или props.item.value.

Dan · Accepted Answer · 2017-06-01 17:09:08

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

Giko · Accepted Answer · 2017-06-01 17:11:24

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