React createPortal with useRef 不起作用

Question

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

据我了解门户，应该在div后附加一个span，但事实并非如此。

为什么会这样？

Answer 1

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

对于这样的情况，你最好使用回调引用：

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