react devtools中的组件选项卡无法正常工作答案

【问题标题】：Componets tab in react dev tools is not working properlyreact devtools中的组件选项卡无法正常工作
【发布时间】：2020-07-29 10:18:22
【问题描述】：

我是新手，我刚刚在 google chrome 中安装了 React Dev Tools 扩展。我意识到检查栏中的 React 选项卡已被 Components 和 Profiler 选项卡取代。

但由于某种原因，组件选项卡中的渲染树不完整看看下面的图片

这是我的应用在“组件”选项卡中的样子

这就是我期待的样子

而且我不知道为什么它显示 Anonymous key = 'something' ForwardRef... Instread 在那边显示一个组件

[![在此处输入图片描述][3]][3]

如前所述，我已经安装了 styled-components 插件 [3]：https://i.stack.imgur.com/j2vnd.png

【问题讨论】：

我很好奇您是如何导出组件的？你是这样吗export default (props) =>...
不，我这样做就像 export default
如果您使用的是forwardRef，则需要设置displayName，否则它不会显示组件名称，呃，这就是目前 hoc 的工作方式。不是displayName 的粉丝，但不管用什么xD
嘿只是一个想法，你可能在使用样式组件吗？
如果有，您是否安装了npm install --save-dev babel-plugin-styled-components

标签： reactjs

【解决方案1】：

确保您遵循这些：

尝试：

const HelloWorld = () => {
  return <h1>Hello</h1>;
};

export default HelloWorld; // Now tool has a name to work on.

检查代码后更新：

您正在使用更高阶的组件，正如我之前/上面提到的，HoC 需要明确的displayName

 const PersonWithRadium = Radium(Person);
 PersonWithRadium.displayName = "PersonWithRadium";
 export default PersonWithRadium;

【讨论】：

【解决方案2】：

看来您确实在使用样式化组件。

这显示给 React 开发工具，因为您可能没有安装调试工具。

npm install --save-dev babel-plugin-styled-components

根据文档，如果您不安装它，它将显示为styled.div，这与您的问题非常相似。

【讨论】：