Question

我有一个React组件，它呈现包含一堆（表格）数据的表。它有一个固定的标题，以及<tbody>上的滚动条。

随着数据量的增加，我正在寻找无限滚动的解决方案，尤其是react-infinite。

此工具完美地几乎，呈现一对<div>以及一些填充等，并在用户滚动时添加/删除内容。这很好，很活泼。

然而，我的控制台充满了抱怨：

Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>.
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>.

这是完全可以理解的，但页面本身的行为正是我想要的。

class Table extends React.Component {
  static propTypes = {
    columns: PT.array,
    data: PT.array
  }

  render () {
    const {
      columns,
      data
    } = this.props;

    const header = this.renderHeaderRow(columns);
    const body = this.renderDataRows(data, columns); // [<tr>]
    const footer = this.renderFooterRow(columns);

    return (
      <table className={this.props.className}>
        <thead>
          {header}
        </thead>
        <tbody>
          {
            /* This injects 2 nested <div>s, which aren't allowed
               as children of <tbody>, nor parent of <tr> :(
            */
          }
          <Infinite elementHeight={50}
                    containerHeight={750}
                    infiniteLoadBeginEdgeOffset={0}
                    timeScrollStateLastsForAfterUserScrolls={0}>
            {body}
          </Infinite>
        </tbody>

        <tfoot>
          {footer}
        </tfoot>
      </table>
    );
  }
}

我试过了

<Infinite>
  <table> ... </table>
<Infinite>

但是这（当然）导致整个表存在于可滚动框内。我只需要<tbody>可滚动。

<table>
  <tbody>
    <tr>
      <td>
        <Infinite>
          ...
        </Infinite>
      </td>
    </tr>
  </tbody>
<table>

但即使在调整CSS到处尝试使其工作之后，这也会打破一切，感觉就像一个丑陋的黑客。

对于无法“破坏HTML规则”的无限滚动<tbody>元素，是否有解决方案？

Answer 1

您的问题的答案是“传统意义上的......”。假设您需要滚动表，并且react-infinite仅限于创建<div>元素，则您无法拥有有效的标记。这是因为<div>在 <table> 内的任何位置都无效，除了表格单元格（ <td> ）元素本身。

话虽如此，你真的需要表吗？一种可能的解决方案是通过使用各种表格 display properties 来创建表现的流内容，如表格

＆＃13;

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  padding: 20px;
  border: 1px solid black;
}

＆＃13;

<div class="table">
  <!--
  React Infinite
  <div>
  -->
    <div class="table-row">
      <div class="table-cell">
        Content
      </div>
      <div class="table-cell">
        Content
      </div>
    </div>
    <div class="table-row">
      <div class="table-cell">
        Content
      </div>
      <div class="table-cell">
        Content
      </div>
    </div>
  <!--
  React Infinite
  </div>
  -->
</div>

＆＃13;

这样，您仍然可以使用完全相同的布局， W3C Validator 考虑您的标记也是有效的。

希望这有帮助！：）

无限可滚动的元素？

1 个答案: