React实现根据容器是否有垂直滚动条动态设置表格宽度

我来帮你完善这个逻辑，实现当包裹表格的<div>出现垂直滚动条时表格宽度设为100%，无滚动条时设为98%的需求。

核心思路 #

判断容器是否存在垂直滚动条的关键是比较元素的scrollHeight（内容总高度）和clientHeight（容器可视高度）：

• 如果scrollHeight > clientHeight，说明内容超出容器，存在垂直滚动条
• 反之则没有滚动条

完整实现代码 #

首先我们优化一下你的代码，用ref代替ReactDOM.findDOMNode（避免严格模式警告），同时用状态来管理宽度，提升性能：

import React from 'react';

class ScrollTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tableWidth: 98 // 默认初始宽度
    };
    this.scrollContainerRef = React.createRef();
  }

  componentDidMount() {
    // 初始渲染后检查一次滚动条状态
    this.updateTableWidth();
  }

  handleScroll = () => {
    // 滚动时更新宽度
    this.updateTableWidth();
  };

  updateTableWidth = () => {
    const container = this.scrollContainerRef.current;
    if (!container) return;

    // 判断是否存在垂直滚动条
    const hasVerticalScrollbar = container.scrollHeight > container.clientHeight;
    const newWidth = hasVerticalScrollbar ? 100 : 98;
    
    if (newWidth !== this.state.tableWidth) {
      this.setState({ tableWidth: newWidth });
    }
  };

  render() {
    return (
      <div 
        ref={this.scrollContainerRef}
        onScroll={this.handleScroll} 
        className="scroll-property"
        style={{ overflowY: 'auto', maxHeight: '400px' }} // 示例：给容器设置最大高度触发滚动
      >
        <table 
          className="react-listing-table table" 
          style={{ width: `${this.state.tableWidth}%` }}
        >
          {/* 表格内容 */}
          <thead>
            <tr>
              <th>表头1</th>
              <th>表头2</th>
              <th>表头3</th>
            </tr>
          </thead>
          <tbody>
            {/* 示例数据，可根据实际情况替换 */}
            {Array.from({ length: 20 }).map((_, idx) => (
              <tr key={idx}>
                <td>数据{idx+1}</td>
                <td>数据{idx+1}</td>
                <td>数据{idx+1}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

export default ScrollTable;

关键细节说明 #

• Ref的使用：通过React.createRef()获取容器DOM节点，比ReactDOM.findDOMNode更符合React的最佳实践，且不会触发严格模式警告。
• 初始检查：在componentDidMount中调用updateTableWidth，确保初始渲染时就能正确设置表格宽度，而不是只有滚动时才调整。
• 状态管理：用state存储表格宽度，避免在render中频繁调用计算方法，提升渲染性能。
• 滚动条判断逻辑：scrollHeight包含容器内所有内容的高度（包括超出可视区域的部分），clientHeight是容器的可视高度，两者的差值判断是否存在垂直滚动条。

额外优化建议 #

如果你的项目使用函数组件，可以用useRef和useEffect实现相同逻辑：

import React, { useState, useRef, useEffect } from 'react';

const ScrollTable = () => {
  const [tableWidth, setTableWidth] = useState(98);
  const scrollContainerRef = useRef(null);

  const updateTableWidth = () => {
    const container = scrollContainerRef.current;
    if (!container) return;
    const hasVerticalScrollbar = container.scrollHeight > container.clientHeight;
    setTableWidth(hasVerticalScrollbar ? 100 : 98);
  };

  useEffect(() => {
    updateTableWidth();
    const container = scrollContainerRef.current;
    if (container) {
      container.addEventListener('scroll', updateTableWidth);
      return () => container.removeEventListener('scroll', updateTableWidth);
    }
  }, []);

  return (
    <div 
      ref={scrollContainerRef}
      className="scroll-property"
      style={{ overflowY: 'auto', maxHeight: '400px' }}
    >
      <table 
        className="react-listing-table table" 
        style={{ width: `${tableWidth}%` }}
      >
        {/* 表格内容 */}
      </table>
    </div>
  );
};

export default ScrollTable;

内容的提问来源于stack exchange，提问作者sumit