现象:

 原因: react使用了函数组件,并使用了React.memo来包裹,而React.memo里面使用了箭头函数。

 

当你在 React.memo 包装的组件内部使用箭头函数时,React DevTools 可能会无法正确识别组件的名称,通常会显示为 "Memo(Anonymous)",而不是你期望的组件名称。

这是因为箭头函数是匿名的,无法提供给 React DevTools 一个明确的名称

解决办法:

  1. React.memo内部使用function命名函数

    export const Header: React.FC = React.memo(

    // 在这里给出一个有名字的函数,而不是匿名箭头函数

    function Header() { // 组件代码块 }

    );

  2. 给函数组件手动添加 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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐