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

​