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

Posted 2023-02-22

【中文标题】如何解决 eslint 错误：自定义路由组件中的“禁止传播道具”？

【英文标题】：How to resolve eslint error: "prop spreading is forbidden" in a custom route component?

【发布时间】：2020-03-02 16:39:11

【问题描述】：

如何解决自定义路由组件中的 eslint 错误：“prop spread is disabled”？

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

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

【参考方案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 */。 要为所有文件禁用它，请尝试以下操作：Disable in EsLint "react / jsx-props-no-spreading" error in Reactjs

根据下面的答案编辑 cmets

【讨论】：

谢谢你！我添加了一条规则 "react/jsx-props-no-spreading": ["error", "custom": "ignore"] 它解决了问题

【参考方案2】：

因为 ESLint 很重要，你使用哪种类型的注释，合法的是：

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

【讨论】：

这……在我的头撞墙太久之后。评论类型显然很重要。

【参考方案3】：

如果您使用的是 vscode 并安装了 eslint 插件，那么只需 hover over the error it will open the dialog as shown in image -> quick fix -> disable for this line.

这样做会自动添加正确的 lint 注释。

【参考方案4】：

你可以用这个来注释下面一行：-

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