React中在表格map函数后添加<tr>标签报错，求解决方案

我来帮你搞定这个问题！你遇到的第一个错误是因为React的JSX核心规则：相邻的JSX元素必须被一个父容器包裹。你的代码里，map函数返回了一组<tr>元素，后面又直接跟了一个<tr><td>Hi</td></tr>，这两个是同级的相邻元素，没有被任何容器包裹，所以触发了报错。

至于你尝试用{}包裹map后出现的新错误，应该是写法不对——比如你可能只把map放在{}里，但没和后面的<tr>一起包裹在容器中，导致语法解析出错。

下面给你两种可行的解决方案：

方案一：使用React.Fragment（推荐） #

Fragment是React提供的“隐形”容器，它不会在DOM中生成额外的节点，非常适合表格这种对DOM结构敏感的场景。你只需要把map的结果和后面的<tr>一起包裹在<React.Fragment>（或简写<></>）里，同时注意把map表达式放在{}中：

<tbody>
  {(typeof transfersIn.donation !== "undefined") ? (
    <React.Fragment>
      {transfersIn.donation.map((donation, index) => {
        totalCIDonation += donation.amount;
        return (
          <tr key={index}>
            <td className="date">{Common.getDateFormat(donation.date)}</td>
            <td>
              {(typeof donation.items !== "undefined") ? (
                donation.items.length > 1 ? (
                  donation.items.map((item, index) => (<p key={index}>{item.description}</p>))
                ) : donation.items[0].description
              ) : null}
            </td>
            <td>
              {(typeof donation.items !== "undefined") ? (
                donation.items.length > 1 ? (
                  donation.items.map((item, index) => (<p key={index}>{item.details}</p>))
                ) : donation.items[0].details
              ) : null}
            </td>
            <td className="dollars">{Common.getDollarFormat(donation.amount)}</td>
          </tr>
        )
      })}
      <tr>
        <td colSpan="4">Hi</td>
      </tr>
    </React.Fragment>
  ) : (
    <tr>
      <td colSpan="4">No donations into your {accountLabel.Brokerage} occurred in this period.</td>
    </tr>
  )}
</tbody>

注意：我给<td>Hi</td>加了colSpan="4"，这样它会横跨表格的4列，避免表格布局错位。

方案二：使用数组包裹 #

你也可以把map的结果和后面的<tr>放在一个数组里，不过要给每个元素添加唯一的key（包括后面的“Hi”行）：

<tbody>
  {(typeof transfersIn.donation !== "undefined") ? (
    [
      transfersIn.donation.map((donation, index) => {
        totalCIDonation += donation.amount;
        return (
          <tr key={index}>
            <td className="date">{Common.getDateFormat(donation.date)}</td>
            <td>
              {(typeof donation.items !== "undefined") ? (
                donation.items.length > 1 ? (
                  donation.items.map((item, index) => (<p key={index}>{item.description}</p>))
                ) : donation.items[0].description
              ) : null}
            </td>
            <td>
              {(typeof donation.items !== "undefined") ? (
                donation.items.length > 1 ? (
                  donation.items.map((item, index) => (<p key={index}>{item.details}</p>))
                ) : donation.items[0].details
              ) : null}
            </td>
            <td className="dollars">{Common.getDollarFormat(donation.amount)}</td>
          </tr>
        )
      }),
      <tr key="hi-row">
        <td colSpan="4">Hi</td>
      </tr>
    ]
  ) : (
    <tr>
      <td colSpan="4">No donations into your {accountLabel.Brokerage} occurred in this period.</td>
    </tr>
  )}
</tbody>

这种方式也能解决问题，但数组里的每个元素都需要key，否则React会抛出警告。

为什么之前的尝试会出错？ #

你之前给map包裹{}后出现的Unexpected token错误，大概率是因为你只包裹了map，但没把后面的<tr>一起放进容器里——比如写成{map(...)}<tr>...</tr>，这时候还是两个相邻的JSX元素，不符合规则。必须把它们一起放在Fragment或数组里才行。

内容的提问来源于stack exchange，提问作者emma