reactjs - 如何防止我内存的 React 组件在 React DevTools 中显示为 "Anonymous"？

Question

当用 React.memo 定义 React 组件时

const MyComponent = React.memo((props) => <div>...</div>);

React DevTools 在组件树中将组件标记为“Anonymous”。如果应用程序包含多个内存组件，这会使调试变得困惑。

如何让我的备忘组件名称显示在 React DevTools 中？

Answer 1

Anonymous 是在函数没有内部 .name 或用户提供的 .displayName 时显示的后备名称。通常这意味着它被声明为匿名内联函数，例如React.memo(props => ...).

要显示组件的名称，您应该像这样传递组件

const MyComponent = props => <div>...</div>;

export default React.memo(MyComponent);