在 JSX 中反应迭代道具

Question

我是 React 的新手，我对 JSX 中的道具数据迭代感到困惑。

假设 this.props.data 是

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

如何迭代table中的数据？

我希望它会呈现出类似这样的效果

<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

我会映射它。我假设格式将始终相同（出于懒惰）。

（请不要运行该片段，它仅用于格式化）

Fiddle: 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>

在 JSX 中反应迭代道具

React iterate props in JSX

javascript

jsx

reactjs