在JSX中反应迭代道具

Question

我是React新手，对于在JSX迭代props数据感到困惑。

假设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>