React hooks 在scrollIntoView的动态长度数组中使用引用

我对使用useffect和useRef有些陌生。我试图做的是创建一个内容管理系统，为单个页面滚动应用程序的数据库中的n个页面元素启用scrollIntoView

我不能让它工作，所以我希望得到一些帮助

我发布了一个简单的测试，其中我有一个功能性的react组件，第2部分在其中工作（单击按钮向下滚动到页面元素）

但我的目标是从数据库中获取“n”个节，并创建“n”个引用以向下滚动到“n”个节

我尝试了useRef、useffect等，但我被难住了。我的代码片段显示了一个第2节手动引用声明的工作示例，但第1节尝试使用引用集合，但这不起作用

下面是一个代码示例：

import React，{useRef}来自“React”；
从“react dom”导入react dom；
导入“/styles.css”；
常量应用=（）=>{
让pageRef=useRef([
React.createRef（），
React.createRef（）
]);
const pageHomeRef=React.createRef（）；
constScrollToRef=ref=>ref.current.scrollIntoView（{行为：“平滑”}）；
常数scrollToPane=ref=>scrollToRef（ref）；
返回(
{
滚动平面（pageRef[1]）；
}}
>
滚动到第1节
scrollToPane（pageHomeRef）}>
第二节
第一节
第二节
);
};

我想输入一个页面元素数组，并根据需要动态更改引用。

对代码进行少量排序-试试看 可以在数组中使用React.createRef（）或useRef（null）

并在数组中为我们提供许多参考

如果你有一个列表，甚至可以制作地图（） 你还有其他方法来代替裁判

import React, { useRef } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const App = () => {
  let pageRef = [useRef(null),useRef(null)];
  const pageHomeRef = [React.createRef(),React.createRef()];

  const scrollToRef = ref => ref.current.scrollIntoView({ behavior: "smooth" });
  const scrollToPane = num => scrollToRef(pageRef[num]);

  return (
    <div className="App">
      <div className="menu">
        <button
          onClick={() => {scrollToPane(0)}}>Scroll to Section 1</button>
        <button onClick={() => scrollToPane(1)}>Section 2</button>
      </div>
      <div
        className="page"
        style={{ marginTop: "1500px", marginBottom: "1500px" }}
      >
        <div className="section1" ref={pageRef[0]}>
          Section 1
        </div>
        <div className="section2" ref={pageRef[1]}>
          Section 2
        </div>
      </div>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React，{useRef}来自“React”；
从“react dom”导入react dom；
导入“/styles.css”；
常量应用=（）=>{
设pageRef=[useRef（null），useRef（null）]；
const pageHomeRef=[React.createRef（），React.createRef（）]；
constScrollToRef=ref=>ref.current.scrollIntoView（{行为：“平滑”}）；
常量scrollToPane=num=>scrollToRef（pageRef[num]）；
返回(
{scrollToPane（0）}}>滚动到第1节
涡卷烷（1）}>第2节
第一节
第二节
);
};
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

const pageHomeRef=[React.createRef（），React.createRef（）]；

。这一行就是问题所在。我不知道需要多少个ref。是否可以映射（）这些？是的，它是数组，你可以推送更多的空引用。通过索引引用的数字来创建列表。看看链接，你也可以使用一个对象，用节名作为键，用新引用作为值。我使用了你的示例，它工作了。感谢你的快速响应

import React, { useRef } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const App = () => {
  let pageRef = [useRef(null),useRef(null)];
  const pageHomeRef = [React.createRef(),React.createRef()];

  const scrollToRef = ref => ref.current.scrollIntoView({ behavior: "smooth" });
  const scrollToPane = num => scrollToRef(pageRef[num]);

  return (
    <div className="App">
      <div className="menu">
        <button
          onClick={() => {scrollToPane(0)}}>Scroll to Section 1</button>
        <button onClick={() => scrollToPane(1)}>Section 2</button>
      </div>
      <div
        className="page"
        style={{ marginTop: "1500px", marginBottom: "1500px" }}
      >
        <div className="section1" ref={pageRef[0]}>
          Section 1
        </div>
        <div className="section2" ref={pageRef[1]}>
          Section 2
        </div>
      </div>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);