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

Question

框架：盖茨比

语境：

我创建了一个FormDropdown wrapper component ，它导入了一个 3rd 方反应组件。 我不得不覆盖属性和方法的地方。

问题：

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

代码：

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 错误/警告：

'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`.

问题：

• 为什么调用外部方法会产生此错误，如果我直接编写 function 则不会？

Answer 1

由于您不使用Flow或Typescript之类的类型检查，因此这是您抵御运行时类型错误的唯一防线。

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

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

阅读关于作文。

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

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

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

或者在项目的.eslintrc中：

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

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