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
?
À 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>
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>
)
}
}
<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
.
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')
);