如何解决自定义路由组件中禁止传播道具?

Alm*_*iev 18 reactjs eslint react-router-dom

如何解决自定义路由组件中禁止传播道具?

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}}} />
  )}
  />
);
Run Code Online (Sandbox Code Playgroud)

Tom*_*zyk 25

对于 ESLint,您使用哪种类型的评论很重要,合法的评论是:

/* eslint-disable react/jsx-props-no-spreading */
Run Code Online (Sandbox Code Playgroud)

  • 这是……在我的头撞墙太久之后。评论类型显然很重要。 (2认同)

Sou*_*osh 23

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

根据下面的答案编辑评论

  • 感谢你!我添加了一条规则 "react/jsx-props-no-spreading": ["error", {"custom": "ignore"}] 它解决了问题 (2认同)