目标

我想创建一个带滚动体和粘性标题的表.表头单元格宽度需要与其对应的主体列宽相匹配.

它位于React中,Table组件包含两个独立的组件(一个用于标头,另一个用于主体中的行).组件的内容将来自外部源,因此我无法对任何宽度做出任何假设.表的主体将有很多行,因此表头需要是粘性的并保持在顶部.

问题

虽然表体中列的宽度是自动设置的,但宽度不会自动设置在表头中.表头宽度需要根据表的内容自动设置.

您可以在此处查看问题和我的测试代码：
https://codesandbox.io/s/y0jx5rp081

注意事项

>如果有充分的理由,我愿意使用插件或库,但如果可能的话,我宁愿不这样做
>我已经尝试过react-sticky,它不支持表格格式
>我也尝试过react-sticky-table,它不允许我将表拆分为行组件,我需要这样做才能帮助提高渲染效率
>再一次,我需要自动设置所有宽度.到目前为止,我见过的唯一解决方案是手动设置标题中的宽度

最佳答案 您可以通过在渲染后查询表单元格的宽度来获取它们的宽度.要在渲染后访问React组件,我们需要使用ref.

constructor(props) {
  ...
  this.bodyRef = React.createRef()
}

将它作为支柱传递给桌子身体.

<tbody
  ...
  ref={this.bodyRef}
>

然后,您可以在componentDidMount中渲染后访问它.如果删除,添加或编辑行,您可能也想在componentDidUpdate中执行它(但要注意不要进行无限循环).

componentDidMount() {
  const row = this.bodyRef.current.children[0].children; // Get the children of one <tr>
  // the path from this.bodyRef.current to the children you need may vary.
  const headerWidths = [];
  for (let i = 0; i < row.length; i += 1) {
    headerWidths.push(row[i].getBoundingClientRect().width); // Get the rendered width of the element.
  }
  this.setState({
    headerWidths
  });
}

然后只使用您所在州的宽度值.

constructor(props) {
  ...
  this.state = {
    ...
    headerWidths: []
  }
}
...
render() {
  return (
    ...
    <th style={{ width: this.state.headerWidths[index] }}>
      ...
    </th>
  )
}

这是您方便示例的工作版本.