为什么我的组件在 React 组件开发工具中显示为匿名

Question

我已经阅读了一些这样的例子，但找不到有意义的答案。 我有一个 React 组件树，它显示了一些带有组件名称的组件，但其他的只是匿名的。

我不明白为什么。

显示为匿名的组件声明为：

  export const AddUserButton: React.StatelessComponent<{
  title: string;
  test?: string;
  onClick(): void;
}> = ({ title, test, onClick }) => (
  <CommonUserButton
    title={title}
    test={test}
    onClick={onClick}
  />
);

一个简单的例子和​​解释会很好谢谢。

Answer 1

Babel 转译组件的方式根据你声明它们的方式略有不同。 如果你这样声明，你应该有正确的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;

您也可以尝试通过执行AddUserButton.displayName = "AddUserButton";自己设置 displayName AddUserButton.displayName = "AddUserButton"; .