react工具中的组件选项卡不能正常工作。
react工具中的组件选项卡不能正常工作。
提问于 2020-07-25 13:23:40
我是新的反应，我刚刚安装了反应发展工具扩展谷歌铬。我意识到检查栏中的React选项卡已被Components和Profiler选项卡替换。
但是由于某些原因，呈现的树在components选项卡中没有完成，请看下面的图片
这就是我的应用程序在“组件”选项卡中的样子。
这就是我期待的样子
我不知道它为什么要显示匿名键=‘某事’ForwardRef.在那里显示一个组件
如前所述，我已经安装了样式组件插件3：https://i.stack.imgur.com/j2vnd.png。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-07-25 13:37:47
请确保您正在遵循以下内容：
- 如果您使用的是组件的默认导出，则该组件没有使用.
的名称。
尝试：
const HelloWorld = () => {
return <h1>Hello</h1>;
};
export default HelloWorld; // Now tool has a name to work on.- For HoC，您可以使用“displayName”属性：
更有用的参考文献：https://reactjs.org/docs/forwarding-refs.html#displaying-a-custom-name-in-devtools
- React dev tools允许您查看处于“DEV”模式且不运行产品生成的组件.
检查代码后更新：
- 您使用的是高阶组件，正如我前面/前面提到的，HoC需要显式的
displayName
const PersonWithRadium = Radium(Person)；PersonWithRadium.displayName = "PersonWithRadium"；导出默认的PersonWithRadium
Stack Overflow用户
发布于 2020-07-25 13:59:53
看起来您确实在使用样式化的组件。
这显示了对Dev工具的反应，因为您可能没有安装调试工具。
npm install --save-dev babel-plugin-styled-components根据文档，如果您不安装它，它将显示为styled.div，这与您的问题非常相似。
更多信息在这里：https://styled-components.com/docs/tooling#better-debugging
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63088883
复制相关文章
相似问题
腾讯云开发者
