Question

  const ref = useRef(null);

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

据我所知，门户网站应在span后面附加div，但不是。

为什么会这样？

Answer 1

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

对于这种情况，您最好使用callback ref：

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

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

使用useRef反应createPortal不起作用

1 个答案: