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

＆＃13;

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;