Использование 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

javascript

reactjs

eslint

react-proptypes

react-forwardref
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