reactjs - 使用 useRef 反应 createPortal 不起作用

Question

  const ref = useRef(null);

  return (
    <>
      {ref.current !== null &&
        createPortal(<span>Hello!</span>, ref.current as any)}
      <div ref={ref}></div>
    </>
  );

据我了解门户网站，span应将 a 附加到div，但事实并非如此。

为什么呢？

标签： reactjsreact-hooks

Answer 1

对 refs 的更改不会触发更新（重新渲染）。我的猜测是您的组件仅渲染一次，ref.current已设置，但没有重新渲染，因此您看不到span.

对于这种情况，您可能最好使用回调 ref：

const onRef = element => {
  if (element !== null) {
    createPortal(<span>Hello!</span>, element);
  }
};

return <div ref={onRef}></div>;