外部方法参数上出现不必要的propType错误

Question

框架：盖茨比

上下文：

我创建了一个FormDropdown wrapper component，它导入了一个第三方react组件。我必须覆盖属性和方法的位置。

问题：

为了代码的可读性，我没有直接在组件属性中编写方法，而是在外部构建了自定义函数。这个外部函数在传递给这个函数的参数上生成ESLINT道具错误，但如果我直接在属性上编写函数，则不会发生这种情况。请参阅下面的代码示例替代方案：

代码：

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这样的和类型检查，所以这是您抵御运行时类型错误的唯一防线。

在proptypes中声明所有这些方法变量是否正确？

是。但更好的解决方案是重写这个组件，因为传递这么多道具是不可读和不可维护的。

阅读作文。

如果没有，有办法避免吗？

建议这样做，但您可以通过关闭特定文件的lint规则来避免：

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

或在项目的.eslintrc中：

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

Googleeslintrc disable "react/prop-types"获取更多解决方案。