在外部方法参数上出现不需要的propType错误。

Question

框架。 盖茨比

语境。

我已经创建了一个 FormDropdown wrapper component 其中导入了一个第三方的反应组件。其中我不得不覆盖属性和方法。

问题是，我没有在组件属性中直接写方法，而是在外部建立了自定义函数。

为了代码的可读性，我没有直接在组件属性中写方法，而是在外部建立了自定义函数。这个外部函数会在传递给这个函数的参数上产生ESLINT props错误，但如果我直接在属性上写函数就不会发生这种情况。

代码: Yarn lint proptype errorsw

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>
    );
};

Yarn lint proptype errorswarnings:

'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中声明所有这些方法变量是正确的吗？

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

阅读关于 构成.

如果没有，有什么办法可以避免吗？

建议你可以通过关闭特定文件的lint规则来避免它。

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

或者在... .eslintrc 的项目。

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

谷歌 eslintrc disable "react/prop-types" 更多的解决方案。