Reactjs 反应动态表行

我有一个映射到一个对象数组的react表。我还想映射这些对象的一个属性以创建更多行。我要映射的对象属性也是一个对象数组。因此，我的数据如下所示：

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

然后，在我的渲染中，我在一个表中有：

<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…所在的行上出现意外的标记错误，表示它在那里需要一个逗号。我不确定如何正确执行此操作。

您正在关闭{row.children.map…之前的行上的标记，这是非法的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];
})}

您正在关闭{row.children.map…之前的行上的，这是非法的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];
})}

你应该退一张支票

尝试此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>

你应该退一张支票

尝试此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>

---

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