如何使用 React 滚动到行列表中的一行？

问题描述

我使用的是 React 虚拟化表，它有一个非常有用的 prop，称为 scrollToIndex 可以完成这项工作。

但是，我不得不摆脱库并使用我自己的 JSX。

现在我有一个很大的项目列表如下：-

      render() {
        return(
          <div className="container">
            {projects.map(project => (
              <ProjectRow
                key={project.id}
                project={project}
              />
          ))}
   )};

现在让我们假设项目数组有 100 多个项目，我想最初滚动到它的中间，假设项目位于索引 50。

怎么做？

我尝试在 div 本身上使用 useRef() 和 createRef() 但没有任何成功。

解决方法

您可以使用scrollIntoView方法进入特定位置

export default function App() {
  const [projects,setProjects] = useState([]);
  useEffect(() => {
    let p = [];
    for (let i = 0; i < 300; i++) {
      p.push({
        projectId: i,projectName: `Project ${i}`
      });
    }
    setProjects(p);
  },[]);

  function scrollTo(position) {
    const project = document.getElementById(position);
    project.scrollIntoView();
  }

  return (
    <div className="App">
      <button onClick={() => scrollTo(50)}>Scroll to 50</button>
      <button onClick={() => scrollTo(150)}>Scroll to 150</button>
      <button onClick={() => scrollTo(250)}>Scroll to 250</button>
      {projects.map((px,index) => (
        <Project
          key={index}
          projectName={px.projectName}
          projectId={px.projectId}
        />
      ))}
    </div>
  );
}

请在代码和框 https://codesandbox.io/s/happy-jennings-o7tob

中找到完整的示例