在 React 中 Prop spreading is forbidden 警告

Prop spreading is forbidden warning in React

警告“Props spreading is forbidden”是当我们在将 props 传递给组件时使用 spread 语法解压 props 对象时引起的。要绕过警告，请禁用 eslint 规则。

这是警告如何引起的示例。

应用程序.js


const App = props => {
  // ⛔️ Prop spreading is forbidden eslint(react/jsx-props-no-spreading)
  return (
    <div>
      <Button {...props} />
    </div>
  );
};

export default App;

function Button(props) {
  return <button {...props}>Click</button>;
}

消除警告的最佳方法是禁用
.eslintrc文件中的规则。

.eslintrc.js


module.exports = {
  rules: {
    'react/jsx-props-no-spreading': 'off',
  }
}

或者，您可以通过在文件顶部添加以下注释来禁用单个文件的规则。

应用程序.js


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

// ... your code here

ESlint
规则
期望我们在传递 props 时不要使用
扩展语法 (…)
来解压对象，而是将单个 props 传递给组件。

应用程序.js


const App = props => {
  const {disabled, className} = props;

  // 👇️ only passing props directly
  return (
    <div>
      <Button disabled={disabled} className={className} />
    </div>
  );
};

export default App;

function Button({disabled, className}) {
  return (
    <button disabled={disabled} className={className}>
      Click
    </button>
  );
}

但是，大多数时候该规则带来的麻烦多于实际帮助，因此最好将其关闭。

结论

警告“Props spreading is forbidden”是当我们在将 props 传递给组件时使用 spread 语法解压 props 对象时引起的。要绕过警告，请禁用 eslint 规则。

–