Реагируйте на итерации в 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>