React - 使用 React.memo 时出现“组件定义缺少显示名称”错误

Question

Why am I getting the ESLint error Component definition is missing display name on this code:

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

Is this a false positive or real error?

Answer 1

Exporting an arrow function directly doesn't give the component a displayName , but if you export a regular function the function name will be used as displayName .

You can also put the function in a variable, set the displayName on the function manually, and then export it.

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

Button.displayName = 'Button';
export Button;