如何在运行时安全检测React函数式组件的类型？

由于生产环境代码压缩会改变组件名称，依赖组件名称判断类型的方式不可靠，以下是两种安全的实现方案：

方案一：给组件添加唯一静态标识 #

给Banana组件添加自定义静态属性作为识别标记，压缩工具不会修改静态属性的字面量名称：

function Banana() {
  return <div>Banana</div>
}
// 添加唯一识别标识
Banana.isBananaComponent = true;

对应的isBanana函数实现：

function isBanana(element: any): element is JSX.Element {
  return React.isValidElement(element) && element.type.isBananaComponent === true;
}

方案二：直接比对组件引用 #

函数组件本身是引用类型，压缩工具只会修改函数名称，不会改变引用关系，因此可以直接比对element.type和Banana组件的引用：

function isBanana(element: any): element is JSX.Element {
  return React.isValidElement(element) && element.type === Banana;
}

方案选择建议 #

• 若组件需要跨模块识别（比如定义在不同文件），优先使用方案一，注意保证标识属性的唯一性；
• 若组件和判断逻辑在同一模块或可直接引入组件引用，方案二更简洁高效。

内容的提问来源于stack exchange，提问作者Sasgorilla