陣營迭代道具JSX

Question

我在React是新的，而且我對在JSX迭代道具數據混亂。

假設this.props.data是

[ 
    [ 
    "2017-1", 
    { 
     title: "title1" 
     describe: "des1" 
    } 
    ], 
    [ 
    "2017-2", 
    { 
     title: "title2" 
     describe: "des2" 
    } 
    ],... 
] 

如何在表中？

重複數據我希望它會呈現某種類似這樣的

<tbody> 
    <tr> 
    <td>2017-1</td> 
    <td>title1</td> 
    <td>des1</td> 
    </tr> 
    <tr> 
    <td>2017-2</td> 
    <td>title2</td> 
    <td>des2</td> 
    </tr> 
    ... 
</tbody> 

Answer 1

我會映射它。我假設格式將永遠是相同的（出於懶惰）。

（請不要運行該代碼段，它僅用於格式化）

小提琴：https://jsfiddle.net/gL8drpyd/1/

var data = [ 
 
    [ 
 
    "2017-1", 
 
    { 
 
     title: "title1" 
 
     describe: "des1" 
 
    } 
 
    ], 
 
    [ 
 
    "2017-2", 
 
    { 
 
     title: "title2" 
 
     describe: "des2" 
 
    } 
 
    ] 
 
]; 
 

 
let rows = data.map((item) => 
 
    (
 
    <tr> 
 
     <td>{item[0]}</td> 
 
     <td>{item[1].title}</td> 
 
     <td>{item[1].describe}</td> 
 
    </tr> 
 
) 
 
); 
 

 
// put this in the <tbody> in render 
 

 
<tbody> 
 
    {rows} 
 
</tbody>