為什么將 function 放在 forwardRef 中可以解決此錯誤

Question

目前我正面臨這個錯誤

forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?

通過谷歌搜索，我找到了解決方案，將 function 聲明放入“forwardRef”中。

//this code generates 
const Button = (props, ref) => {return ...Component}

Button.propTypes ={...}

return forwardRef(Button)

// by this way, no error happens
const Button = forwardRef(function Button(props, ref){return ...Component})

Button.propTypes ={...}

return Button

很高興錯誤得到解決，但我只是不明白為什么這種方法解決了錯誤..

有人對此有想法嗎？

Answer 1

在此代碼中，如果它是 React 組件，則只能添加 propTypes。 但是，這個 Button 不是 React 組件，因為第二個參數是ref （即 React 組件只有一個參數是props 。所以這里不能添加 propTypes，因此會報錯。

const Button = (props, ref) => {return ...Component}

Button.propTypes ={...}

return forwardRef(Button)

現在這段代碼可以工作了，因為 forwardRef function 接受了 props、ref 並返回了一個 React 組件。 在 React 組件中，您可以添加 propTypes。 這就是它起作用的原因。

// by this way, no error happens
const Button = forwardRef(function Button(props, ref){return ...Component})

Button.propTypes ={...}

return Button

希望這可以幫助