Нежелательные ошибки propType в аргументах внешних методов

Question

Framework: Gatsby

Контекст:

Я создал FormDropdown wrapper component, который импортирует сторонний компонент реакции. Где я должен был переписать свойства и методы.

Проблема:

Для удобства чтения кода, вместо написания методов непосредственно в свойствах компонента, я создал собственные функции снаружи. Эта внешняя функция генерирует ошибки ESLINT props при передаче аргументов этой функции, но этого не произойдет, если я напишу функцию непосредственно в свойстве. См. Примеры кода ниже:

Код:

const FormDropdown = () => {

    const customDropdownRenderer = (props, state, methods) => {
        //logic
    }

    return (
        <Box sx={styles.dropdownWrapper}>
            <Select
                dropdownRenderer={(props, state, methods) =>
                    //ESLINT errors
                    customDropdownRenderer(props, state, methods)
                }
                itemRenderer={(props, state, methods) => {
                   //logic (no ESLINT errors)
                }}
            />
        </Box>
    );
};

Ошибки / предупреждения типа нитки нитей:

'state' is missing in props validation
'state.search' is missing in props validation
'state.values' is missing in props validation

Чтобы избежать этих ошибок, я попытался определить их в proptypes, это исправило ошибку lint, но я все еще получаю другие ошибки на консоли devtools:

Warning: Failed prop type: The prop `state` is marked as required in `FormDropdown`, but its value is `undefined`.

Вопросы:

• Почему при вызове внешнего метода возникают эти ошибки, а если я пишу функцию напрямую, это не так?

Answer 1

Поскольку вы не используете и не проверяете тип, например Flow или Typescript, это ваша единственная линия защиты от ошибок типа времени выполнения.

Объявление всех этих переменных метода в проптипах правильно?

Да. Но лучшим решением будет переписать этот компонент, так как прохождение такого количества реквизитов нечитаемо и не поддерживается.

Читать о Композиция .

Если нет, это есть способ избежать этого?

Рекомендуется, но этого можно избежать, отключив правило lint для указанного c файла:

/* eslint react/prop-types: 0 */

Или в .eslintrc для проекта:

{
 "plugins": [
     "react"
  ],
  "rules": {
    "react/prop-types": 0
  }
}

Google eslintrc disable "react/prop-types" для дополнительных решений.