无法使用React钩子使用scrollTop定位react-perfect-scrollbar

问题描述

我有一个对象数组，这些对象在带有react-perfect-scrollbar实例的表中呈现。

代码如下：

var entire = document.body.innerHTML;
document.onload = chrome.storage.local.get(['full'],function(result) {
entire = result.full; 
console.log(result.full);
});

document.onbeforeunload = 
entire = document.body.innerHTML;
console.log(entire);
chrome.storage.local.set({'full': entire});

我设置了计时器，以防它不能立即正确渲染，只是给它一个等待，但无论有没有计时器，它都无法工作

解决方法

如this github answer中所述，这有效

import React,{ useRef } from 'react'
import PerfectScrollbar from 'react-perfect-scrollbar'
import './styles.css'

const data = new Array(20).fill(0).map((_,i) => i)

export default function App() {
  const ps = useRef()

  function scrollTop() {
    const curr = ps.current
    if (curr) {
      curr.scrollTop = 0
    }
  }

  return (
    <div>
      <button onClick={scrollTop}>Scroll Top</button>
      <div className="container">
        <PerfectScrollbar containerRef={el => (ps.current = el)}>
          {data.map(e => (
            <div className="item" key={e}>
              {e}
            </div>
          ))}
        </PerfectScrollbar>
      </div>
    </div>
  )
}