javascript - 将forwardRef 与 proptypes 和 eslint 结合使用

Question

我正在尝试使用eslint在项目中对按钮使用forwardRef和 prop-types .

这是我迄今为止尝试过的方法，以及每次遇到的错误:

第一次尝试

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)

这将在控制台中显示以下警告:警告:forwardRef 渲染函数不支持 propTypes 或 defaultProps。你是否不小心传递了一个 React 组件？

第二次尝试

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;

我得到: Prop 验证中缺少操作。

第三次尝试

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;

这一次，我得到:组件定义缺少显示名称。

那么正确的方法是什么？

Answer 1

您的第三次尝试即将完成。但您不必使用两次 forwardRef，第一次使用 Button 声明就足够了。显示名称规则不是一个错误(无论是在 JavaScript 还是 React 级别)，而是一个有意的 prop，以便显示 React 在调试消息中使用的组件的“真实”名称。 在您的情况下，forwardRef 函数将隐藏转译器的“真实”组件名称。

如果为每种情况编写 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