滚动到反应视图中

Question

我正在制作一个简单的反应应用程序，其中有两个不同的div's..

具有选择输入和选定列表的一个，

  <div id="container">
    <div className="_2iA8p44d0WZ">
      <span className="chip _7ahQImy">Item One</span>
      <span className="chip _7ahQImy">Item Two</span>
      <span className="chip _7ahQImy">Item Three</span>
      <span className="chip _7ahQImy">Item Four</span>
      <span className="chip _7ahQImy">Item Five</span>
      <input
        type="text"
        className="searchBox"
        id="search_input"
        placeholder="Select"
        autoComplete="off"
        value=""
      />
    </div>
  </div>

另一个会将所选选项列出为fieldset，

  <div>
    {selectedElements.map((item, i) => (
      <div key={i} className="selected-element" ref={scrollDiv}>
        <fieldset>
          <legend>{item}</legend>
        </fieldset>
      </div>
    ))}
  </div>

基于这个解决方案，我已添加createRef到所选元素，例如，

<div key={i} className="selected-element" ref={scrollDiv}>
</div>

然后我采用 Javascript 查询方法来获取 DOM 元素，例如，

  const chipsArray = document.querySelectorAll("#container > div > .chip");

向所有元素添加了单击事件侦听器，例如，

  chipsArray.forEach((elem, index) => {
    elem.addEventListener("click", scrollSmoothHandler);
  });

然后scrollSmoothHandler就像，

const scrollDiv = createRef();

  const scrollSmoothHandler = () => {
    console.log(scrollDiv.current);
    if (scrollDiv.current) {
      scrollDiv.current.scrollIntoView({ behavior: "smooth" });
    }
  };

但这并没有按预期工作。

要求：

单击 中的任何项目first div时，其相关字段集需要进入smooth scrolled另一个 div 中。

例如： 如果用户单击Item Four下面的 元素<div id="container"> ... <span className="chip _7ahQImy">Item Four</span> ... </div>

那么相关的字段集需要滚动进去。这里的字段集图例为Item Four..

我认为也在react上制作js dom查询方法，但它似乎不是一个react的实现方式。任何人都可以帮助我实现单击所选项目时滚动到相关字段集的结果。

Answer 1

问题

1. React.createRef实际上只在基于类的组件中有效。如果在功能组件主体中使用，则将在每个渲染周期重新创建引用。
2. 不要使用 DOM 查询选择器将onClick侦听器附加到 DOM 元素。这些存在于外部反应，您需要记住清理它们（即删除它们），这样就不会出现内存泄漏。使用 React 的onClickprop。
3. 映射后，您将相同的selectedElements引用附加到每个元素，因此最后一组是您的 UI 获取的元素。

解决方案

1. 在功能组件主体中使用React.useRef来存储反应引用数组，以附加到要滚动到视图中的每个元素。
2. scrollSmoothHandler将直接附加到每个span的onClick支柱上。
3. 将 1. 中创建的引用数组中的每个引用附加到要滚动到的每个映射字段集。

代码

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

const App = () => {
  const selectedElements = [
    "Item One",
    "Item Two",
    "Item Three",
    "Item Four",
    "Item Five"
  ];

  // React ref to store array of refs
  const scrollRefs = useRef([]);

  // Populate scrollable refs, only create them once
  // if the selectedElements array length is expected to change there is a workaround
  scrollRefs.current = [...Array(selectedElements.length).keys()].map(
    (_, i) => scrollRefs.current[i] ?? createRef()
  );

  // Curried handler to take index and return click handler
  const scrollSmoothHandler = (index) => () => {
    scrollRefs.current[index].current.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <div>
      <div id="container">
        <div className="_2iA8p44d0WZ">
          {selectedElements.map((el, i) => (
            <span
              className="chip _7ahQImy"
              onClick={scrollSmoothHandler(i)} // <-- pass index to curried handler
            >
              {el}
            </span>
          ))}
          <input
            type="text"
            className="searchBox"
            id="search_input"
            placeholder="Select"
            autoComplete="off"
            value=""
          />
        </div>
      </div>
      <div>
        {selectedElements.map((item, i) => (
          <div
            key={i}
            className="selected-element"
            ref={scrollRefs.current[i]} // <-- pass scroll ref @ index i
          >
            <fieldset>
              <legend>{item}</legend>
            </fieldset>
          </div>
        ))}
      </div>
    </div>
  );
};

解决方案#2

由于您无法更新divwith中的任何元素id="container"，并且所有onClick处理程序都需要通过查询 DOM 来附加，因此您仍然可以使用柯里化scrollSmoothHandler回调并将索引包含在范围内。您需要一个钩子来在初始渲染后useEffect查询 DOM ，以便安装跨度，并需要一个钩子来存储“已加载”状态。该状态是触发重新渲染并重新包含在回调中所必需的。useStatescrollRefsscrollSmoothHandler

const App = () => {
  const selectedElements = [
    "Item One",
    "Item Two",
    "Item Three",
    "Item Four",
    "Item Five"
  ];

  const [loaded, setLoaded] = useState(false);
  const scrollRefs = useRef([]);

  const scrollSmoothHandler = (index) => () => {
    scrollRefs.current[index].current.scrollIntoView({ behavior: "smooth" });
  };

  useEffect(() => {
    const chipsArray = document.querySelectorAll("#container > div > .chip");

    if (!loaded) {
      scrollRefs.current = [...Array(chipsArray.length).keys()].map(
        (_, i) => scrollRefs.current[i] ?? createRef()
      );

      chipsArray.forEach((elem, index) => {
        elem.addEventListener("click", scrollSmoothHandler(index));
      });
      setLoaded(true);
    }
  }, [loaded]);

  return (
    <div>
      <div id="container">
        <div className="_2iA8p44d0WZ">
          <span className="chip _7ahQImy">Item One</span>
          <span className="chip _7ahQImy">Item Two</span>
          <span className="chip _7ahQImy">Item Three</span>
          <span className="chip _7ahQImy">Item Four</span>
          <span className="chip _7ahQImy">Item Five</span>
          <input
            type="text"
            className="searchBox"
            id="search_input"
            placeholder="Select"
            autoComplete="off"
            value=""
          />
        </div>
      </div>
      <div>
        {selectedElements.map((item, i) => (
          <div key={i} className="selected-element" ref={scrollRefs.current[i]}>
            <fieldset>
              <legend>{item}</legend>
            </fieldset>
          </div>
        ))}
      </div>
    </div>
  );
};