web-dev-qa-db-fra.com

Itérer sur JSON dans React

J'ai le code suivant:

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

Cela affiche les éléments suivants:

{"active": {"label": "Active", "valeur": "12"}, "automatique": {"label": "Automatique", "valeur": "8"}, "en attente": { "label": "En attente", "valeur": "1"}, "manuel": {"label": "Manuel", "valeur": "3"}}

Comment puis-je parcourir les accessoires highlights_data.data pour appeler un autre composant transmettant label et value?

javascriptreactjsjsx
6
davideghz

À l'exception de la réponse de @ Dan, je ne crois pas que les autres réponses vous soient utiles/utiles car elles ne parcourent pas votre objet JSON.

Pour le faire correctement, vous devrez parcourir chacune de vos clés dans votre objet JSON. Vous pouvez procéder de différentes manières, notamment avec Object.keys(). Comme l'extrait de code ci-dessous.

Cette solution parcourt chaque clé de votre objet JSON et la pousse dans un tableau. Une fois que vous avez ce tableau, vous pouvez le parcourir avec map(), comme vous le feriez normalement, et transmettre vos accessoires pertinents à un autre composant enfant.:

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>

11
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>
        )
    }
}
3
Dan
<div>
  {this.props.highlights_data.data.map((e, i) => 
    <SomeComponent key={i} label={e.label} value={e.value} />
  )}
</div>

Vous pouvez simplement envoyer l'article lui-même.

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

Et accédez à label et value dans l’enfant avec props.item.label ou props.item.value. 

3
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