react如何获取组件名字
在React中获取组件名称可以通过以下几种方法实现，具体选择取决于使用场景和需求：
使用displayName属性
为组件手动设置displayName静态属性，之后通过该属性直接访问名称：
function MyComponent() {
return <div>Example</div>;
}
MyComponent.displayName = 'CustomName';
// 获取方式
console.log(MyComponent.displayName); // 输出: 'CustomName'通过name属性获取
对于函数组件或类组件，可直接访问函数的name属性：
function MyComponent() {}
class ClassComponent {}
console.log(MyComponent.name); // 'MyComponent'
console.log(ClassComponent.name); // 'ClassComponent'注意：生产环境代码可能因压缩工具（如Terser）导致name被修改。
高阶组件（HOC）中的处理
若组件被高阶组件包装，需通过displayName或WrappedComponent获取原始名称：
function withHOC(WrappedComponent) {
return class HOC extends React.Component {
static displayName = `HOC(${WrappedComponent.displayName || WrappedComponent.name})`;
render() {
return <WrappedComponent {...this.props} />;
}
};
}开发环境下的__DEV__特殊处理
利用React开发环境特性获取组件信息：
if (__DEV__) {
console.log(componentInstance.type.name); // 仅开发环境有效
}通过Babel插件保留名称
配置babel-plugin-transform-react-jsx-source等插件，可在元素上注入__source属性包含组件信息。
注意事项：
- 类组件的
name属性在继承场景下可能返回基类名称。 - 生产环境需确保打包工具不会抹除
displayName等元信息。
