33

我正在尝试在使用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 Button;

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

那么正确的方法是什么？

4

3 回答 3

53

您几乎完成了第三次尝试。但是你不必使用两次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

于 2020-01-17T15:56:52.267 回答
6 
const Form = React.forwardRef(function Form(
  { submitHandler, keyUpHandler, label, type, placeholder, buttonTxt },
  ref
) {

export default Form

这样做没有警告。function Form照顾这个名字。

于 2021-03-05T18:15:14.523 回答
2 
interface SomeProps {
 // written your props
};

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

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

于 2021-04-05T03:54:27.483 回答