为什么把函数放在forwardRef里面解决了这个错误

Question

目前我面临这个错误

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

任何方式通过谷歌搜索，我找到了解决方案，这是把函数声明在'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函数接受props、ref并返回一个React组件。在React组件中，你可以添加propTypes。这就是为什么它有效。

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

希望有帮助