Использование forwardRef с proptypes и eslint

Я пытаюсь использовать forwardRef для кнопки 9X_reactjs в проекте, используя eslint и prop-types.

Это то, что я пробовал 9X_react-jsx до сих пор, и каждый раз получаю ошибки:

Первая попытка

function Button ({ action = { callback: () => {}, title: 'unknown' } }, ref) {
  return ()
}

Button.propTypes = {
  action: Action.isRequired
}

export default forwardRef(Button)

В 9X_react-proptypes консоли появится следующее предупреждение: 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 ()
}

const Button = forwardRef(ButtonFunction);

Button.propTypes = {
  action: Action.isRequired
}

export default ButtonFunction;

Я 9X_javascript-library получаю: action is missing in props validation.

Третья попытка

const Button = forwardRef(({ action = { callback: () => {}, title: 'unknown' } }, ref) => {
  return ()
});

Button.propTypes = {
  action: Action.isRequired
}

export default Button;

На этот раз я получаю: Component definition is missing display name.

Итак, как 9X_eslint правильно это сделать?

36
0
3
Общее количество ответов: 3

Ответ #1

Ответ на вопрос: Использование forwardRef с proptypes и eslint

Вы почти закончили свою третью попытку. Но 9X_react вам не нужно использовать дважды forwardRef, достаточно 9X_js первого использования с объявлением Button. Правило 9X_react-jsx отображаемого имени не является ошибкой 9X_react-jsx (ни на уровне JavaScript, ни на уровне React), а 9X_javascript-library скорее преднамеренной опорой для отображения 9X_.js «настоящего» имени компонента, используемого 9X_react-jsx React в отладочных сообщениях. В вашем случае 9X_javascript функция forwardRef скроет "настоящее" имя 9X_javascript-library компонента для транспилятора.

Вы даже можете 9X_react.js отключить это правило, если действительно 9X_eslint проблема написать 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.propTypes = {
  action: Action.isRequired
}

Button.displayName = 'Button'

export default Button

55
1

  • Я пробовал 30 минут, чтобы адаптировать ваш ответ, он работает, только если мы поставим тот же порядок, что и ...

Ответ #2

Ответ на вопрос: Использование forwardRef с proptypes и eslint

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

export default Form

В этом случае предупреждений нет. function Form заботится 9X_react-proptypes об имени.

6
1

  • Не могли бы вы объяснить, как работал этот ...

Ответ #3

Ответ на вопрос: Использование forwardRef с proptypes и eslint

interface SomeProps {
 // written your props
};

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

Объявление типа пропсов для внутреннего 9X_javascript FC может исправить предупреждение о проптипах!

2
0