blocks|key|1422006|text|请确保您正在遵循以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1422007|1422008|如果您使用的是组件的默认导出，则该组件没有使用.|unordered-list-item|1422009|的名称。|1422010|尝试：|1422011|const+HelloWorld+=+()+=>+{
++return+<h1>Hello</h1>;
};

export+default+HelloWorld;+//+Now+tool+has+a+name+to+work+on.|code-block|syntax|javascript|1422012|1422013|For+HoC，您可以使用“displayName”属性：|1422014|1422015|更有用的参考文献：https://reactjs.org/docs/forwarding-refs.html#displaying-a-custom-name-in-devtools|offset|length|1422016|1422017|React+dev+tools允许您查看处于“DEV”模式且不运行产品生成的组件.|1422018|1422019|检查代码后更新：|1422020|1422021|您使用的是高阶组件，正如我前面/前面提到的，HoC需要显式的displayName|style|CODE|1422022|1422023|const+PersonWithRadium+=+Radium(Person)；PersonWithRadium.displayName+=+"PersonWithRadium"；导出默认的PersonWithRadium|1422024|​|1422025|📷|atomic|1422026|1422027|entityMap|0|LINK|mutability|MUTABLE|url|https://reactjs.org/docs/forwarding-refs.html#displaying-a-custom-name-in-devtools|1|IMAGE|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/718ac4b9b883919bbfcec1500e1e3e8f.png|imageAlt^0|0|0|0|0|0|0|0|0|0|9|2A|0|0|0|0|0|0|0|U|B|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|1U|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|1W|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1X|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1Z|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|20|8|@]|9|@]|A|$]]|$1|P|3|Q|5|E|7|21|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|22|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|23|8|@]|9|@$U|24|V|25|1|26]]|A|$]]|$1|W|3|-4|5|6|7|27|8|@]|9|@]|A|$]]|$1|X|3|Y|5|E|7|28|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|29|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|2A|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|2B|8|@]|9|@]|A|$]]|$1|13|3|14|5|E|7|2C|8|@$U|2D|V|2E|15|16]]|9|@]|A|$]]|$1|17|3|-4|5|6|7|2F|8|@]|9|@]|A|$]]|$1|18|3|19|5|6|7|2G|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|2H|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|1E|7|2I|8|@]|9|@$U|2J|V|2K|1|2L]]|A|$]]|$1|1F|3|1B|5|6|7|2M|8|@]|9|@]|A|$]]|$1|1G|3|-4|5|6|7|2N|8|@]|9|@]|A|$]]]|1H|$1I|$5|1J|1K|1L|A|$1M|1N]]|1O|$5|1P|1K|1Q|A|$1R|1S|1T|-4]]]]

Make sure you are following these:
<ul>
<li>if you are using default export of components, there is no name for the component for dev tools to use.</li>
</ul>
try:
<pre><code>const HelloWorld = () =&gt; {
 return &lt;h1&gt;Hello&lt;/h1&gt;;
};

export default HelloWorld; // Now tool has a name to work on.
</code></pre>
<ul>
<li>For HoC, you can use 'displayName' property:</li>
</ul>
More useful ref: <a href="https://reactjs.org/docs/forwarding-refs.html#displaying-a-custom-name-in-devtools" rel="nofollow noreferrer">https://reactjs.org/docs/forwarding-refs.html#displaying-a-custom-name-in-devtools</a>
<ul>
<li>React dev tools allows you to see the components that are in 'DEV' mode and not running production build.</li>
</ul>
Update after checking code:
<ul>
<li>You are using higher order components and as I mentioned earlier/above HoC needs explicit <code>displayName</code>
<pre><code> const PersonWithRadium = Radium(Person);
 PersonWithRadium.displayName = &quot;PersonWithRadium&quot;;
 export default PersonWithRadium;
</code></pre>
</li>
</ul>
<a href="https://i.stack.imgur.com/QJYmU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QJYmU.png" alt="Dev tools snippet" /></a>

blocks|key|2911279|text|看起来您确实在使用样式化的组件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2911280|这显示了对Dev工具的反应，因为您可能没有安装调试工具。|2911281|npm+install+--save-dev+babel-plugin-styled-components|code-block|syntax|javascript|2911282|根据文档，如果您不安装它，它将显示为styled.div，这与您的问题非常相似。|offset|length|style|CODE|2911283|更多信息在这里：https://styled-components.com/docs/tooling#better-debugging|2911284|entityMap|0|LINK|mutability|MUTABLE|url|https://styled-components.com/docs/tooling#better-debugging^0|0|0|0|I|A|0|8|1N|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@$K|12|L|13|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|14|8|@]|9|@$K|15|L|16|1|17]]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

It seems you are really using Styled Components.
That shows to React Dev tools because you are probably not installing the debugging tools.
<pre><code>npm install --save-dev babel-plugin-styled-components
</code></pre>
According to the docs it will show as <code>styled.div</code> if you don't install this which is pretty much similar to your problem.
More info here: <a href="https://styled-components.com/docs/tooling#better-debugging" rel="nofollow noreferrer">https://styled-components.com/docs/tooling#better-debugging</a>

I am new to react and I have just installed the React Dev Tools extension in google chrome.
I realized that the React tab in the inspect bar was replaced by Components and Profiler tabs.
But for some reason, The rendered tree is not complete in the components tab
take a look at the following pictures
This is what my app looks like in the Components tab
<a href="https://i.stack.imgur.com/OM5rw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OM5rw.png" alt="enter image description here" /></a>
This is what I am expecting it to look like
<a href="https://i.stack.imgur.com/VriJJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VriJJ.png" alt="enter image description here" /></a>
And I don't know why it is showing Anonymous key = 'something' ForwardRef... Instread of showing a component over there
[![enter image description here][3]][3]
As mentioned I have installed the styled-components plugin
[3]: <a href="https://i.stack.imgur.com/j2vnd.png" rel="nofollow noreferrer">https://i.stack.imgur.com/j2vnd.png</a>

Componets tab in react dev tools is not working properly

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我是新的反应，我刚刚安装了反应发展工具扩展谷歌铬。我意识到检查栏中的React选项卡已被Components和Profiler选项卡替换。但是由于某些原因，呈现的树在components选项卡中没有完成，请看下面的图片这就是我的应用程序在“组件”选项卡中的样子。​​这就是我期待的样子​​我不知道它为什么要显示匿名键=‘...

问react工具中的组件选项卡不能正常工作。
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问react工具中的组件选项卡不能正常工作。EN