在 scrollIntoView 的动态长度数组中使用 Refs

Posted 2023-02-25

【中文标题】在 scrollIntoView 的动态长度数组中使用 Refs

【英文标题】：Using Refs in a Dynamic Length Array for scrollIntoView

【发布时间】：2019-09-02 21:10:43

【问题描述】：

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

我无法让它工作，所以我希望得到一些帮助。

我发布了一个简单的测试，其中我有一个功能性反应组件，其中第 2 节起作用（单击按钮向下滚动到页面元素。

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

我尝试了 useRef、useEffect 等，但我很难过。我的代码 sn-p 显示了一个工作示例，其中包含第 2 节的手动 ref 声明，但第 1 节尝试使用 Refs 的集合，但这是行不通的

这是一个代码示例：https://codesandbox.io/embed/trusting-stallman-bsjj1?fontsize=14

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

import "./styles.css";

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


  const pageHomeRef = React.createRef();

  const scrollToRef = ref => ref.current.scrollIntoView( behavior: "smooth" );
  const scrollToPane = ref => scrollToRef(ref);

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

我想提供一组页面元素并根据需要动态更改引用。

【参考方案1】：

点代码 - 试试看

你可以在数组中使用 React.createRef() 或 useRef(null)。

并让我们在数组中创建许多您想要的参考。

如果你有列表，甚至可以制作地图 (https://dev.to/ajsharp/-an-array-of-react-refs-pnf) 而且您还有其他方式来安装 refs。

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);

【讨论】：

const pageHomeRef = [React.createRef(),React.createRef()]; 。这条线是问题所在。我不知道我需要多少裁判。是否可以 map() 这些？

是的，它是数组，你可以推送更多的空引用。并按索引列出参考编号。查看链接，您还可以使用对象并使用部分名称作为键和新的引用作为值。

我使用了您的示例并使其正常工作。感谢您的快速响应