将 forwardRef 与 proptypes 和 eslint 一起使用

Posted 2023-02-19

【中文标题】将 forwardRef 与 proptypes 和 eslint 一起使用

【英文标题】：Using forwardRef with proptypes and eslint

【发布时间】：2020-04-30 03:18:42

【问题描述】：

我正在尝试在使用 eslint 和 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。

那么正确的做法是什么？

【参考方案1】：

interface SomeProps 
 // written your props
;

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

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

【参考方案2】：

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

export default Form

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

【讨论】：

您能否解释一下这种方法的工作原理？

【参考方案3】：

您的第三次尝试几乎完成了。但是你不必使用两次forwardRef，第一次使用Button 声明就足够了。显示名称规则不是错误（在 javascript 和 React 级别都不是），而是为了显示组件的“真实”名称而有意的道具，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

【讨论】：

对不起第二个 forwardRef，我在不同尝试之间的复制粘贴搞砸了...非常感谢您的回答！

我尝试了 30 分钟来调整您的答案，只有在我们下达与您相同的订单时才有效！在const Button = forwardRef 之前没有Button.propTypes，因为我们可以使用正常功能。谢谢你的回答:)

我遇到了相关问题。像这样启动我的组件：