如何检测反应元素是反应门户？

Question

ReactProtal界面是这样的：

interface ReactPortal extends ReactElement {
    key: Key | null;
    children: ReactNode;
}

如何检查反应元素是否是反应门户？

const element: ReactPortal | JSX.Element = getComponent();
if(isReactPortal(element)) {
   // do something with react portal
} else {
   // do something with usual react element
}

当前解决方案：检查 key 属性是否存在

if('key' in element) {
  // is react portal
} else {
  // is usual react element
}

但我不确定这是否坚固和安全。

Answer 1

您可以使用react-is library to determine if the component is a portal or not. It has many utilities including isPortal函数。

如果您更有冒险精神并且想自己实现一些东西。您可以通过代码 here.

如何检测反应元素是反应门户？

How to detect that the react element is a react portal?

typescript

reactjs

react-dom