使用带有原型和eslint的forwardRef

Question

bounty到期在7天内。这个问题的答案有资格获得+ 50声望赏金。Sharcoux希望对此问题引起更多关注：“预期答案将提供一种将forwarRef与功能组件一起使用的方式，而不会引起eslint和prop-type的任何警告或错误。 ”

我正在尝试使用eslint和prop-types在项目中将ForwardRef用于Button。

这是到目前为止我尝试过的，并且每次都会收到错误：

第一次尝试

function Button ({ action = { callback: () => {}, title: 'unknown' } }, ref) {
  return (<button ref={ref} onClick={action.callback} title={action.description} type="button">{action.icon || action.title}</button>)
}

Button.propTypes = {
  action: Action.isRequired
}

export default forwardRef(Button)

这将在控制台中向我发出以下警告：Warning: forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?

第二次尝试

function ButtonFunction ({ action = { callback: () => {}, title: 'unknown' } }, ref) {
  return (<button ref={ref} onClick={action.callback} title={action.description} type="button">{action.icon || action.title}</button>)
}

const Button = forwardRef(ButtonFunction);

Button.propTypes = {
  action: Action.isRequired
}

export default ButtonFunction;

我得到：action is missing in props validation。

第三次尝试

const Button = forwardRef(({ action = { callback: () => {}, title: 'unknown' } }, ref) => {
  return (<button ref={ref} onClick={action.callback} title={action.description} type="button">{action.icon || action.title}</button>)
});

Button.propTypes = {
  action: Action.isRequired
}

export default forwardRef(Button)

这次，我得到：Component definition is missing display name。

那么正确的方法是什么？

Answer 1

您几乎已经完成了第三次尝试。但是您不必使用两次forwardRef，第一次使用Button声明就足够了。并且显示名称不是错误，