将 forwardRef 与 proptypes 和 eslint 一起使用

Question

我正尝试在使用 eslint and prop-types 的项目中为按钮使用 forwardRef。

这是我目前尝试的方法，以及我每次遇到的错误：

第一次尝试

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 Button;

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

那么正确的做法是什么？

Answer 1

您几乎完成了第三次尝试。但是你不必使用两次 forwardRef，第一次使用 Button 声明就足够了。显示名称规则不是错误（既不在 JavaScript 也不在 React 级别），而是为了显示组件的 "real" 名称的有意道具，React 在调试消息时使用该名称。在您的情况下，forwardRef 函数将隐藏转译器的 "real" 组件名称。

如果为每种情况编写 displayName 确实有问题，您甚至可以禁用此规则。

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md

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
}

Button.displayName = 'Button'

export default Button

Answer 2

const Form = React.forwardRef(function Form(
  { submitHandler, keyUpHandler, label, type, placeholder, buttonTxt },
  ref
) {

export default Form

这样做没有警告。 function Form 负责名字。

Answer 3

interface SomeProps {
 // written your props
};

const SomeFC = forwardRef((props:SomeProps,ref)=>{
// do something and returns
}})

声明内部FC的props类型可以修复proptypes警告！

将 forwardRef 与 proptypes 和 eslint 一起使用

Using forwardRef with proptypes and eslint

javascript

reactjs

eslint

react-proptypes

react-forwardref

第一次尝试

第二次尝试

第三次尝试