外部方法参数上不需要的propType错误

Question

框架： Gatsby

上下文：

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

问题：

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

代码：

const FormDropdown = props => {

    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

为了避免此错误，我尝试在原型中定义它们，它修复了皮棉错误，但在devtools控制台上仍然出现其他错误：

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

问题：

• 为什么调用外部方法会导致此错误，而如果我直接编写该函数则不会呢？

Answer 1

由于您不使用并像Flow或Typescript那样进行类型检查，因此这是针对运行时类型错误的唯一防线。

在原型中声明所有这些方法var是正确的吗？

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

阅读有关Composition。

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

建议，但可以通过关闭特定文件的皮棉规则来避免使用它：

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

或在项目的.eslintrc中：

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

Google eslintrc disable "react/prop-types"了解更多解决方案。