React - 使用 React.memo 时出现 "Component definition is missing display name" 错误

Question

为什么我在这段代码中收到 ESLint 错误 Component definition is missing display name：

export const Button = React.memo(props => {
//...
});

这是误报还是真正的错误？

Answer 1

直接导出箭头函数不会给组件一个displayName，但如果导出一个常规函数，函数名称将被用作displayName。

也可以将函数放在变量中，手动在函数上设置displayName，然后导出。

const Button = React.memo(props => {
//...
});

Button.displayName = 'Button';
export Button;

React - Getting "Component definition is missing display name" error when using React.memo