reactjs 服装钩子说元素数组是不可迭代的

mnemlml8 于 2023-02-15 发布在 React

关注(0)|答案(1)|浏览(108)

我正在尝试创建一个服装挂钩，它为ref中的所有li元素调用IntersectionObserver。
当我只是在组件中使用它时，它工作得很好：

const App = () => {

  const array = [...Array(50).keys()];
  const ref = React.useRef(null);
  
  
  React.useEffect(() => {

        const observer = new IntersectionObserver((entries) => {
            entries.forEach((element: any) => {
                if (element.isIntersecting) {
                         element.target.style.color = 'green';
                }
            })

        })

        ref.current.querySelectorAll(`li`).forEach(element => {
            observer.observe(element);

        });
}, [ ]);
  
  return (
    <ul ref={ref}>
        {array.map((_, i) => <li key={i}>{i}</li>)}
    </ul>
  )
}

ReactDOM.createRoot(document.getElementById(`root`))
  .render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script><div id="root"></div>

但是当我把它分解成一个服装钩子时，它说它是不可迭代的：
一个二个一个一个
有没有一种方法可以做到这一点，只需给服装挂钩一个元素数组？
"谢谢"😊

reactjs

来源：https://stackoverflow.com/questions/75441708/costume-hook-says-array-of-elements-is-not-iterable

1条答案

按热度按时间

cgyqldqp1#

当你调用钩子，并传递ref.current?.querySelectorAll( li )时，ref.current仍然是null，所以结果是undefined，不可迭代。
而是传递一个函数，允许useEffect块在ref已经设置时获取这些项：

const useCostumeHook = (getElements) => {
  React.useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((element: any) => {
        if (element.isIntersecting) {
          element.target.style.color = 'green';
        }
      })
    })
    
    const elements = getElements();

    elements?.forEach(element => {
      observer.observe(element);
    });
  }, []);
}

用法：

useCostumeHook(() => ref.current?.querySelectorAll(`li`))

赞(0）回复(0）举报 2023-02-15

我来回答

reactjs 服装钩子说元素数组是不可迭代的

1条答案

相关问题

热门标签

最新问答