反应动态表行答案

【问题标题】：React dynamic table rows反应动态表行
【发布时间】：2017-08-18 01:15:07
【问题描述】：

我有一个映射到一组对象的反应表。我还想映射这些对象的属性之一以创建更多行。我要映射的对象属性也是一个对象数组。所以我的数据看起来像这样：

[
  {id:1,name:"fakeName",children:[{id:10,name:"fakeChildName"}]},
  {id:2,name:"fakeName2",children:[{id:11,name:"fakeChildName11"}]}
]

然后，在我的render() 中，我将这个放在一个表中：

<tbody>
  {myArray.map(row => (
    <tr key={`row-${row.name}`}>
      <td>
        <div className="parent">{row.id}</div>
      </td>
      <td>{row.name}</td>
      <td />
      <td />
      <td />
    </tr>
  ))}
</tbody>

这渲染得很好。我想遍历 row.children 对象以创建更多行来填充同一表格主体的第 3、4 和 5 列。所以我这样做了：

<tbody>
  {myArray.map(row => (
    <tr key={`row-${row.name}`}>
      <td>
        <div className="parent">{row.id}</div>
      </td>
      <td>{row.name}</td>
      <td />
      <td />
      <td />
    </tr>
    {row.children.map(childRow => (
      <tr key={`row-child-${childRow.name}`}>
        <td />
        <td />
        <td>{childRow.id}</td>
        <td>{childRow.name}</td>
        <td><button>myButton</button></td>
      </tr>
    ))}
  ))}
</tbody>

当我添加该片段时，我在{row.children.map... 的行上收到一个意外的令牌错误，说它期待在那里有一个逗号。我不确定如何正确执行此操作。

【问题讨论】：

标签： reactjs html-table

【解决方案1】：

您正在关闭{row.children.map... 之前的<tr>，这是非法的JSX。你可以改为返回一个 JSX 数组：

{myArray.map(row => ([
  <tr key={`row-${row.name}`}>
    <td>
      <div className="parent">{row.id}</div>
    </td>
    <td>{row.name}</td>
    <td />
    <td />
    <td />
  </tr>,
  {...row.children.map(childRow => (
    <tr key={`row-child-${childRow.name}`}>
      <td />
      <td />
      <td>{childRow.id}</td>
      <td>{childRow.name}</td>
      <td><button>myButton</button></td>
    </tr>
  ))}
]))}

你可以看出这会让事情变得很糟糕，所以我更喜欢清晰而不是简洁：

{myArray.map(row => {
  const parentRow = (
    <tr key={`row-${row.name}`}>
      <td>
        <div className="parent">{row.id}</div>
      </td>
      <td>{row.name}</td>
      <td />
      <td />
      <td />
    </tr>
  );
  const childrenRows = row.children.map(childRow => (
    <tr key={`row-child-${childRow.name}`}>
      <td />
      <td />
      <td>{childRow.id}</td>
      <td>{childRow.name}</td>
      <td><button>myButton</button></td>
    </tr>
  ));

  return [parentRow, ...childrenRows];
})}

【讨论】：

谢谢。我选择使用你的第二个例子。

【解决方案2】：

您应该返回single React element。

试试这个（div 是单个 React 元素）：

<tbody>
  {myArray.map(row => {
    return (
      <div>
        <tr key={`row-${row.name}`}>
          <td>
            <div className="parent">{row.id}</div>
          </td>
          <td>{row.name}</td>
          <td />
          <td />
          <td />
        </tr>
        {row.children.map(childRow => (
          <tr key={`row-child-${childRow.name}`}>
            <td />
            <td />
            <td>{childRow.id}</td>
            <td>{childRow.name}</td>
            <td><button>myButton</button></td>
           </tr>
         ))}
       </div>
     )
    })}
  </tbody>

【讨论】：