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

Question

我使用的是 React-virtualized table，它有一个非常有用的 prop 叫做 scrollToIndex 来完成这项工作。

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

现在我有一大堆项目如下：-

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

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

怎么做？

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

Answer 1

您可以使用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>
  );
}

请在codesandbox中找到完整的例子https://codesandbox.io/s/happy-jennings-o7tob

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

How do I scroll to a row in a list of rows using React?

javascript

reactjs

react-virtualized

use-ref