React - 使用 React.memo 時出現“組件定義缺少顯示名稱”錯誤

Question

為什么我收到 ESLint 錯誤Component definition is missing display name on this code：

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

這是誤報還是真正的錯誤？

Answer 1

直接導出箭頭 function 不會為組件提供displayName ，但如果導出常規 function ，則 function 名稱將用作displayName 。

也可以把function放在一個變量里，在function上手動設置displayName ，然后導出。

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

Button.displayName = 'Button';
export Button;