如何在react-perfect-scrollbar中添加选项

问题描述

我正在使用react-perfect-scrollbar并像这样进行初始化

<PerfectScrollbar
    onScrollY={container => console.log(`scrolled to: ${container.scrollTop}.`)}>
    ... SCROLLBAR CONTENT HERE ...
</PerfectScrollbar>

我正在尝试添加options，尤其是suppressScrollY。我尝试过

<PerfectScrollbar
    options={{ suppressScrollY: true }}
    ... SCROLLBAR CONTENT HERE ...
</PerfectScrollbar>

它被忽略了。

我在这里想念什么？ 谢谢

解决方法

我将升级到其最新版本，即本文撰写之时的1.5.6。原因之一是，如果您查看他们的文档，他们以前有名为option而不是options的道具。我已经在CodeSandBox中测试了该理论，并且可以得出结论，与options相关的suppressScrollY道具仅适用于1.5.1及更高版本。

我发现的另一个问题是它们的组件当前存在重新渲染的问题。例如，如果您最初将suppressScrollY设置为true并将其状态设置为例如false，则更改不会立即反映出来。要解决此问题，很遗憾，您必须重新安装组件。

在下面的代码中查看我的评论：

import React,{ useState } from "react";
import "react-perfect-scrollbar/dist/css/styles.css";
import PerfectScrollbar from "react-perfect-scrollbar";

export default function App() {
  // holds the state if scrollY should be suppressed
  const [scrollYSuppressed,setScrollYSuppressed] = useState(true);

  // holds the state for the key prop of PerfectScrollbar
  // will be incremented to force re-mounting of component
  // due to issues with reinitializing options prop
  const [key,setKey] = useState(0);

  const sampleContainer = {
    maxHeight: "100px"
  };

  const sampleContent = {
    height: "200px",background: "black"
  };

  return (
    <div className="App">
      <PerfectScrollbar
        style={sampleContainer}
        options={{ suppressScrollY: scrollYSuppressed }}
        onScrollY={(container) =>
          console.log(`scrolled to: ${container.scrollTop}.`)
        }
        key={key}
      >
        <div style={sampleContent}></div>
      </PerfectScrollbar>
      <div>scrollYSuppressed: {scrollYSuppressed.toString()}</div>
      <button
        onClick={() => {
          setScrollYSuppressed(!scrollYSuppressed);
          setKey(key + 1);
        }}
      >
        Toggle Scroll Y
      </button>
    </div>
  );
}