javascript - 如何在 UseEffect 中将事件侦听器添加到 UseRefs

Question

我想eventListener在我的 React 组件中添加一个节点。我正在选择带有useRef钩子的节点。我是useCallback因为它useRef是null第一次渲染。

const offeringsContainer = useRef(null);

const setOfferingsContainer = useCallback((node) => {
  if (node !== null) {
    offeringsContainer.current = node;
  }
}, []);

我的问题是我对裁判useEffect所做的任何更改都没有反应。offeringContainer意思是，offeringContainer.current是null。

useEffect(() => {
    checkHeaderState();
    offeringsContainer.current.addEventListener("wheel", onOfferingsContainerWheel, { passive: false });
}, [offeringsContainer.current]);

这是我的 JSX：

return (
    <Fragment>
      <div className="card-business-products-services-title-text">
        Products &amp; Services
      </div>
      <div
        className="card-business-products-services-container"
        id="card-business-products-services-container"
        onWheel={onOfferingsContainerWheel}
        ref={setOfferingsContainer}
      >
        {renderOfferings()}
      </div>
    </Fragment>
);

我知道我做错了什么，但我的 useEffect 钩子应该监听来自offeringsContainer.current.

Answer 1

您可以只是过去offeringsContainer的ref组件。useEffect只有在第一次渲染时才会被调用，这就是为什么你offeringsContainer.current不会null.

并且您在卸载组件后忘记删除侦听器。

你的代码应该是这样的；

const offeringsContainer = useRef(null);

useEffect(() => {
  checkHeaderState();
  offeringsContainer.current.addEventListener(
    "wheel",
    onOfferingsContainerWheel,
    { passive: false }
  );

  return () => offeringsContainer.current.removeEventListener("wheel");
}, []);

return (
  <Fragment>
    <div className="card-business-products-services-title-text">
      Products &amp; Services
    </div>
    <div
      className="card-business-products-services-container"
      id="card-business-products-services-container"
      onWheel={onOfferingsContainerWheel}
      ref={offeringsContainer}
    >
      {renderOfferings()}
    </div>
  </Fragment>
);

示例：https ://codesandbox.io/s/wizardly-banzai-3fhju?file=/src/App.js