[英]Why does my component show as Anonymous in React components dev tool
I've read a few examples of this but couldn't find an answer that made sense.我已经阅读了一些这样的例子,但找不到有意义的答案。 I have a React component tree which is showing some components with their component names but others as just Anonymous.我有一个 React 组件树,它显示了一些带有组件名称的组件,但其他的只是匿名的。
I can't understand why.我不明白为什么。
The components showing as Anonymous are declared as:显示为匿名的组件声明为:
export const AddUserButton: React.StatelessComponent<{
title: string;
test?: string;
onClick(): void;
}> = ({ title, test, onClick }) => (
<CommonUserButton
title={title}
test={test}
onClick={onClick}
/>
);
A simple example and explanation would be good thanks.一个简单的例子和解释会很好谢谢。
Babel transpiles components slightly different based on how you declare them. Babel 转译组件的方式根据你声明它们的方式略有不同。 You should have the correct displayName
if you declare like this:如果你这样声明,你应该有正确的displayName
:
// NOTE: React.StatelessComponent<T> is deprecated!
const AddUserButton: React.FunctionComponent<{
title: string;
test?: string;
onClick(): void;
}> = ({ title, test, onClick }) => (
<CommonUserButton
title={title}
test={test}
onClick={onClick}
/>
);
export default AddUserButton;
You can also try to set the displayName yourself by doing AddUserButton.displayName = "AddUserButton";
您也可以尝试通过执行AddUserButton.displayName = "AddUserButton";
自己设置 displayName AddUserButton.displayName = "AddUserButton";
. .
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.