Iterieren über JSON in

Question

Reagieren

ich folgenden Code haben:

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

Dies gibt die folgenden:

{ "aktiv": { "label": "Aktiv", "Wert": "12"}, "automatisch": {"Label": "Automatisch", "Wert": "8"}, "Warten": {"Label": "Warten", "Wert": "1"}, " Handbuch ": {" label ":" manuell“, "Wert": "3"}}

Wie kann ich iterieren die highlights_data.data Requisiten eine andere Komponente pa zu nennen sssing down label und value?

Answer 1

Außer @ Dan Antwort, glaube ich nicht, die anderen Antworten auf Sie jede hilfreich/nützlich sind, da sie durch Ihre JSON-Objekt nicht wiederholen.

Um dies ordnungsgemäß durchzuführen, müssten Sie alle Ihre Schlüssel in Ihrem JSON-Objekt durchlaufen. Es gibt ein paar Möglichkeiten, wie Sie dies tun können, unter anderem mit Object.keys(). Wie das Code-Snippet unten.

Diese Lösung durchläuft jeden Schlüssel in Ihrem JSON-Objekt und schiebt ihn in ein Array. Sobald Sie das Array haben, können Sie mit map() durchlaufen, wie gewohnt, und übergeben Sie Ihre entsprechenden Requisiten nach unten auf ein anderes Kind Komponente .:

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>

Answer 2

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

Sie könnten nur das Element selbst senden.

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

und Zugang label und value in dem Kind mit props.item.label oder props.item.value.

Answer 3

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

Answer 4

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