React-devtools: 缺少组件名称

创建于 2014-01-03 · 9评论 · 资料来源: facebook/react-devtools

组件名称总是“未知”有什么原因吗？

以防万一，我使用的是 browserify 并且源没有被缩小，只是被连接。

这是它的样子：

资料来源

mrjoes

最有用的评论

我正在使用 chrome 插件React Developer Tools ，当我检查 React 树时，我看到的是“代理组件”而不是组件的实际名称。可能是webpack问题？我尝试添加“displayName”，但没有成功。

还有其他人遇到这个问题吗？

fresh5447 于 2016-06-02

👍3

所有9条评论

好的，这是快速更新：如果组件像这样公开，它将以Unknown作为名称：

exports.MyComponent = React.createClass({...});

但是，当我将其更改为此时，它开始工作：

var MyComponent = React.createClass({...});
exports.MyComponent = MyComponent;

我检查了扩展源代码，但无法弄清楚tagName是什么以及它是如何设置的。

mrjoes 于 2014-01-03

如果您不使用 JSX，则需要向类添加displayName属性。

var MyComponent = React.createClass({
  displayName: 'MyComponent',
  ...
});

如果您使用 JSX，这是自动完成的。不幸的是，没有其他方法可以得到它。

vjeux 于 2014-01-03

是的，我正在使用 JSX。所以，这似乎是不同的问题 - 如果组件是用exports.ComponentName = React.createClass()声明的，JSX 编译器不能贡献displayName exports.ComponentName = React.createClass() 。

mrjoes 于 2014-01-03

这是负责它的代码： https :

vjeux 于 2014-01-03

JSX 理论上也可以支持您的格式。当我们转向 ES6 类或类似的东西时，这个问题就会消失。

tagName 是 React 核心中 DOM 组件的一部分。它没有显示名称。

sebmarkbage 于 2014-01-03

如果您想发送拉取请求，您可以在此处添加您喜欢的格式：

https://github.com/facebook/react/blob/ab47e992155ec9c2455b02bf671e8dd92bd01055/vendor/fbtransform/transforms/reactDisplayName.js#L37 -L51

sebmarkbage 于 2014-01-03

明白了，谢谢。手动displayName现在可以使用。

mrjoes 于 2014-01-03

刚刚制作了https://github.com/facebook/react/pull/799应该可以解决我能想到的所有情况。

sophiebits 于 2014-01-03

还有其他人遇到这个问题吗？

fresh5447 于 2016-06-02

👍3

此页面是否有帮助？

0 / 5 - 0 等级

React-devtools: 缺少组件名称

最有用的评论

所有9条评论

相关问题