如何防止我记忆的 React 组件在 React DevTools 中显示为“匿名”？

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);