为什么导出的React命名函数式组件访问displayName返回undefined？

核心误解澄清 #

你对React displayName 的默认行为存在认知偏差：

React 官方文档中提到的「默认displayName为类/函数名称」，指的是React DevTools等调试工具的显示 fallback 逻辑，而非React会主动为你的组件函数/类对象新增displayName属性。

• 只有用废弃API React.createClass() 创建的组件，React才会自动为生成的组件对象挂载displayName属性；ES6 class 组件、函数组件原生环境下都不会自动生成该属性。

为什么B.name能正常返回值 #

name是JavaScript语言标准中函数对象自带的原生属性，和React完全无关：只要是声明式定义的命名函数，JS引擎会自动为函数对象的name属性赋值为声明时的函数名，你的组件B是用export function B(props) {} 声明的命名函数，所以B.name自然返回"B"。

为什么不存在「组件未识别」的问题 #

React判断一个函数是否可以作为组件使用，和displayName没有任何关系：只要函数接收props参数、返回合法的React节点（JSX、字符串、null等），就可以作为组件渲染。displayName的唯一作用是给调试工具提供可读的组件名称，不参与任何组件身份校验逻辑，所以不存在「B没有被识别为React函数式组件」的情况。

如何让B.displayName返回预期值 #

如果需要显式使用displayName属性，可以手动赋值：

B.displayName = "B";

如果是工程化项目，也可以配置对应的babel插件，在构建阶段自动为所有组件注入displayName属性。

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