html - react-perfect-scrollbar - 不会为 div 持有手风琴更新

Question

我有一个固定高度的容器 div（取决于 100vh 即窗口高度）。在那个容器内，我添加了一些手风琴，当它们打开/关闭时会影响区域运行时的高度。我在我的容器 div 中实现了一个 react-perfect-scrollbar。

当我自动打开/关闭任何手风琴时它不会更新，但当我手动滚动该区域时它工作正常。我需要自动更新滚动条 - 当我打开/关闭手风琴时以及调整屏幕大小时。

这是工作链接：https ://codesandbox.io/s/heuristic-pascal-2sqmt?file=/src/Example.js

如果有人对此有一些修复，请指导。

Answer 1

我找到的唯一解决方案是来自文档：

class Container extends Component {
  ...
  render() {
    return (
      <ScrollBar
        ref = {(ref) => { this._scrollBarRef = ref; }}
      >
        ...
       <ChildComponent
        onUpdateSize = {() => { this._scrollBarRef.updateScroll(); }}
       />
        ...
      </ScrollBar>
    );
  }
}
 
class ChildComponent extends Component {
  handleClick = () => {
    this.setState({
      show: !this.state.show,
    }, () => this.props.onUpdateSize());
  }
 
  render () {
    return (
      <div>
        <button onClick={this.handleClick} />
        { this.state.show ? <div /> }
      </div>
    )
  }
}