Question

我有以下代码：

<tbody className="PMRFYColor">           
  <tr><td colSpan="9"><strong><i>{this.state.families[i].label}</i></strong></td></tr>
    {this.state.types && (
        <div>
            {this.state.types
                .map(types => (
                    <div>
                        <tr><td colSpan="9"><strong>{types.typename}</strong></td></tr>
                        {this.getKPIDataForEachType(types.typename, this.state.families[i].familyKey)}
                        {/* <tr><td colSpan="9"><strong>DELIVER</strong></td></tr>
                        {this.getKPIDataForEachType("Deliver", this.state.families[i].familyKey)}
                        <tr><td colSpan="9"><strong>SUSTAIN</strong></td></tr>
                        {this.getKPIDataForEachType("Sustain", this.state.families[i].familyKey)} */}
                    </div>
                ))}
        </div>
    )}
    <tr><td colSpan={colSpanForWeight}><strong>Total</strong></td>
        <td colSpan="2" align="right" style={{ paddingRight: "2%" }}><strong>{this.getTotalWeight(this.state.families[i].familyKey)}</strong></td></tr>
    <tr hidden={typekey === 'Target' ? true : false}><td colSpan={colSpanForWeight}
        className="td-pass"><strong>Total Passing/On Track</strong></td>
        <td colSpan="2" className="td-pass" align="right" style={{ paddingRight: "2%" }}><strong>{this.getPassPercentage(this.state.families[i].familyKey)}</strong></td></tr>
</tbody>

当我不使用映射功能时，表格会正确显示，但是，当我使用map时，表格会损坏，如您在下一张图片中所见。

Answer 1

您要映射到tr元素旁边，但要生成一个div元素，然后将其内部映射到具有div元素的更多tr元素内部。

该结构将导致：

<tbody ...>
  <tr><td colSpan="9">...</td></tr>
  <div>  <------- first div wrapper
    <div>  <------- one extra div per mapped element
      <tr><td colSpan="9">...</td></tr>
      <tr><td colSpan="9">...</td></tr>
      <tr><td colSpan="9">...</td></tr>
    </div>
    <div>
      <tr><td colSpan="9">...</td></tr>
      <tr><td colSpan="9">...</td></tr>
      <tr><td colSpan="9">...</td></tr>
    </div>
    <div>
      <tr><td colSpan="9">...</td></tr>
      <tr><td colSpan="9">...</td></tr>
      <tr><td colSpan="9">...</td></tr>
    </div>
    ...
  </div>
  <tr><td ...>...</td></tr>
  <tr><td ...>...</td></tr>
</tbody>

这不是有效的表结构，因为您不能将div作为tbody的直接子代。您可能想改用React.Fragment：

<tbody className="PMRFYColor">           
  <tr><td colSpan="9">..../td></tr>
    {this.state.types && (
        <React.Fragment>
            {this.state.types
                .map(types => (
                    <React.Fragment>
                        <tr><td colSpan="9"><strong>{types.typename}</strong></td></tr>
                        {this.getKPIDataForEachType(types.typename, this.state.families[i].familyKey)}
                        {/* <tr><td colSpan="9"><strong>DELIVER</strong></td></tr>
                        {this.getKPIDataForEachType("Deliver", this.state.families[i].familyKey)}
                        <tr><td colSpan="9"><strong>SUSTAIN</strong></td></tr>
                        {this.getKPIDataForEachType("Sustain", this.state.families[i].familyKey)} */}
                    </React.Fragment>
                ))}
        </React.Fragment>
    )}
    <tr><td colSpan={colSpanForWeight}><strong>Total</strong></td>

React.Fragment不会渲染元素，而是直接渲染其子元素。因此，您将产生：

<tbody ...>
  <tr><td colSpan="9">...</td></tr>

  <tr><td colSpan="9">...</td></tr> <---- no wrapping per mapped element
  <tr><td colSpan="9">...</td></tr>
  <tr><td colSpan="9">...</td></tr>

  <tr><td colSpan="9">...</td></tr>
  <tr><td colSpan="9">...</td></tr>
  <tr><td colSpan="9">...</td></tr>

  <tr><td colSpan="9">...</td></tr>
  <tr><td colSpan="9">...</td></tr>
  <tr><td colSpan="9">...</td></tr>

  <tr><td ...>...</td></tr>
  <tr><td ...>...</td></tr>
</tbody>

我假设您最终将取消注释那些DELIVER / SUSTAIN位。如果要删除它们，则可以从映射函数中删除React.Fragment，然后只返回剩下的tr。

最后，您可以使用速记片段语法，即：<>content here</>，但请确保在编译器中启用了它。

在内部使用地图功能时表格损坏

1 个答案: