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>

Answer 2

JSX不生成字符串。它会根据函数调用和对象生成树状结构。任何<tag></tag>都会转换为一个函数调用，这就是您的代码无效的原因。您需要重新考虑此组件。将数据处理和决策分成一个单独的函数，该函数仅执行此操作并返回要呈现的 final 数据。然后在render中循环/映射它，并返回elements结构。

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

2 个答案: