解决使用react devtools调试工具时无法显示组件名称的问题
devtools
vuejs/devtools: Vue.js 开发者工具,这是一个浏览器插件,可以安装在 Chrome 和 Firefox 等现代浏览器中,用于调试 Vue 应用程序,提供了组件树查看、状态快照、时间旅行等高级调试功能。
项目地址:https://gitcode.com/gh_mirrors/de/devtools
免费下载资源
·
现象:
原因: react使用了函数组件,并使用了React.memo来包裹,而React.memo里面使用了箭头函数。
当你在 React.memo 包装的组件内部使用箭头函数时,React DevTools 可能会无法正确识别组件的名称,通常会显示为 "Memo(Anonymous)",而不是你期望的组件名称。
这是因为箭头函数是匿名的,无法提供给 React DevTools 一个明确的名称。
解决办法:
-
在
React.memo内部
使用function命名函数:export const Header: React.FC = React.memo(
// 在这里给出一个有名字的函数,而不是匿名箭头函数
function Header() { // 组件代码块 }
);
-
给函数组件手动添加
displayName
属性:
export const Header: React.FC = React.memo(() => { // 组件代码块 }); Header.displayName = 'Header'; // 手动设置函数组件的显示名称
GitHub 加速计划 / de / devtools
24.6 K
4.14 K
下载
vuejs/devtools: Vue.js 开发者工具,这是一个浏览器插件,可以安装在 Chrome 和 Firefox 等现代浏览器中,用于调试 Vue 应用程序,提供了组件树查看、状态快照、时间旅行等高级调试功能。
最近提交(Master分支:3 个月前 )
79116147 - 4 个月前
f0359002 - 4 个月前
更多推荐
已为社区贡献9条内容
所有评论(0)