如何解决自定义路由组件中的 eslint 错误：“禁止传播 prop”？

Question

如何解决自定义路由组件中的 eslint 错误：“禁止传播属性”？

此错误发生在下面的第 3 行和第 6 行：

const PrivateRoute = ({component: Component, ...rest}) => (
  <Route
    {...rest}
    render={(props) => (
        localStorage.getItem('user') ?
          <Component {...props} /> :
          <Redirect to={{pathname: '/login', state: {from: props.location}}} />
  )}
  />
);

Answer 1

ES lint 不鼓励使用 prop 传播，这样就不会将不需要的/非预期的 props 传递给组件。 更多详细信息请参见：https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md

要对特定文件禁用它，您可以将：

/* eslint-disable react/jsx-props-no-spreading */

放在组件文件的顶行。 要对所有文件禁用它，请尝试以下操作：Reactjs 中的 EsLint“react / jsx-props-no-spreading”错误中禁用

根据下面的答案编辑评论

Answer 2

对于 ESLint 来说，您使用哪种类型的注释很重要，合法的注释是：

/* eslint-disable react/jsx-props-no-spreading */

Answer 3

如果您使用的是 vscode 并安装了 eslint 插件，那么只需

hover over the error it will open the dialog as shown in image -> quick fix -> disable for this line.

这样做会自动添加适当的 lint 注释。

Answer 4

您可以使用它来注释掉以下行：-

/* eslint-disable-next-line react/jsx-props-no-spreading */

Answer 5

当我使用react-hook-form时，我遇到了同样的eslint错误。我解决了它： 添加到

.eslintrc.json

下一个代码：

"rules": {
  "react/jsx-props-no-spreading": ["error", {
    "html": "enforce",
    "custom": "enforce",
    "explicitSpread": "enforce",
    "exceptions": ["input", "textarea"]
  }],
  ...
}

反应组件有问题的代码

const InputElement =
    type === TEXTAREA_TYPE ? (
      <textarea className="textarea" id={id} {...register(id, { required })} />
    ) : (
      <input className="input" type={type} id={id} {...register(id, { required })} />
    );