javascript - React.js-具有行跨度的动态表

Question

我正在尝试使用此示例创建动态表 - Dynamic & Complex rowspan in HTML table

我正在尝试在react.js中复制类似的事情

如果索引为 0，我会在条件渲染中放置一个结束 tr 标记。但是，它给了我“预期的 <> 相应的 JSX 结束标记”

我从后端获得的状态“数据”对象类似于 -

{
  "100": [
    "ABC"
  ],
  "101": [
    "123",
    "DEF",
    "XYZ",
    "456",
    "657",
    "1234",
    "4564",
    "vdfgx",
    "vcegefgg",
    "g544"
  ]
}

我在组件中编写了以下代码来创建动态表。

<table>
    <thead>
        <tr>
            <th>Code</th>
            <th>Reason</th>
        </tr>
    </thead>
    <tbody>
        {Object.keys(this.state.data).map(
            (error_code, i) => {
                return (
                    <React.Fragment>
                        <tr> 
                            <td
                                rowSpan={
                                    this.state.data[
                                        error_code
                                    ].length
                                }
                                key={i}
                            >
                                {error_code}
                            </td>
                            {this.state.data[
                                error_code
                            ].map((error_description, index) => (
                                <React.Fragment>
                                    {index === 0 ? (
                                        <React.Fragment>
                                            <td
                                                key={index}
                                                rowSpan="1"
                                            >
                                                {error_description}
                                            </td>
                                            </tr>                //<---  HERE
                                        </React.Fragment>
                                    ) : (
                                        <tr>
                                            <td
                                                key={index}
                                                rowSpan="1"
                                            >
                                                {error_description}
                                            </td>
                                        </tr>
                                    )}
                                </React.Fragment>
                            ))}
                    </React.Fragment>
                );
            }
        )}
    </tbody>
</table>

我想要最终的输出 -

   <tbody>
    <tr>
        <td rowspan="1">100</td>
        <td rowspan="1">ABC</td>

    </tr>
    <tr>
        <td rowspan="10">101</td>
        <td rowspan="1">123</td>
    </tr>
    <tr>
        <td rowspan="1">DEF</td>
    </tr>
    <tr>
        <td rowspan="1">XYZ</td>
    </tr>
    <tr>
        <td rowspan="1">456</td>
    </tr>
    .....

   </tbody>

有人可以指导我正确的方法来实现所需的输出吗？

Answer 1

JSX 与 XML 一样，需要正确的嵌套 <><tr>...</tr></>并且不支持重叠标签，如 <><tr></></tr> 。您需要以保留正确嵌套的方式构建代码:

  <tbody>
    {Object.keys(this.state.data).map((error_code, i) => {
      return this.state.data[error_code].map((error_description, index) =>
        index === 0 ? (
          <tr>
            <td rowSpan={this.state.data[error_code].length} key={i}>
              {error_code}
            </td>
            <td key={index} rowSpan="1">
              {error_description}
            </td>
          </tr>
        ) : (
          <tr>
            <td key={index} rowSpan="1">
              {error_description}
            </td>
          </tr>
        )
      )
    })}
  </tbody>