遍歷JSON在陣營

我有以下代碼：遍歷JSON在陣營

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

這打印出以下幾點：

{ 「主動」：{ 「標籤」：「活動」，「價值」：「12」}，「自動」：{ 「標記」：「自動」，「值」：「8」}，「等待」：{ 「標籤」：「等待」，「值」：「1」}，」手動「：{」label「：」Manual「，」value「：」3「}}

如何迭代highlights_data.data props來調用另一個Component pa順着label和value？

來源

2017-06-01 davideghz

除了@丹的回答，我不相信其他的答案是任何有用的/對你有用，因爲它們不通過你的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>

來源

2017-06-01 14:10:45 Chris

<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。

來源

2017-06-01 13:51:32 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') 
);

來源

2017-06-01 13:56:45 Giko

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

來源

2017-06-01 14:01:47 Dan

遍歷JSON在陣營

回答

相關問題