Question

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

我无法使其正常运行，因此希望获得一些帮助。

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

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

我尝试使用useRef，useEffect等，但是我很困惑。我的代码段显示了一个带有第2节的手动ref声明的有效示例，但第1节尝试使用ref的集合，但没有用

这是一个代码示例：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>
  );
};

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

Answer 1

小命令代码-试试吧

您可以在数组中使用React.createRef（）或useRef（null）。

让我们在数组中获得许多引用。

如果有列表（https://dev.to/ajsharp/-an-array-of-react-refs-pnf）甚至可以制作地图而且您还可以通过其他方式插入裁判。

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

在动态长度数组中将refs用于scrollIntoView

1 个答案:

小命令代码-试试吧