使用 mapDispatchToProps 避免 no-shadow eslint 错误

Question

我有以下组件在 FilterButton props 上触发 no-shadow ESlint 错误。

 import { setFilter } from '../actions/filter';

function FilterButton({ setFilter }) {
  return (
    <button onClick={setFilter}>Click</button>
  );
}

export default connect(null, { setFilter })(FilterButton);

如何在保持 mapDispatchToProps 和 ESlint 规则的简洁语法的同时避免警告？

我知道我可以添加评论来抑制警告，但对每个组件都这样做似乎是多余且乏味的。

原文由 Kerumen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这里有四个选项：

1.禁用规则。

为什么？

这是避免 ESLint 错误的最简单方法。

为什么不？

no-shadow 规则有助于防止在使用 react-redux 时出现一个非常常见的错误。也就是说，尝试调用原始的、未连接的操作（不会自动调度）。

换句话说， 如果您不 使用解构并从道具中获取动作， setFilter() 将不会分派动作（因为您将直接调用导入的动作，而不是通过道具调用连接的动作通过 props.setFilter() ，其中 react-redux 自动为您发送）。

通过清理 变量阴影，您和/或您的 IDE 更有可能发现错误。

如何？

将 eslintConfig 属性添加到您的 package.json 文件是 一种方法。

 "eslintConfig": {
    "rules": {
      "no-shadow": "off",
    }
  }

2. 将变量传递给 connect() 时重新分配变量。

为什么？

您受益于无影子规则的安全性，而且，如果您选择遵守命名约定，那将是非常明确的。

为什么不？

它介绍了样板。

如果您不使用命名约定，您现在必须为每个操作想出备用名称（仍然有意义）。并且相同的动作可能会在组件之间以不同的方式命名，这使得熟悉动作本身变得更加困难。

如果您确实使用命名约定，名称会变得又长又重复。

如何？

没有命名约定：

 import { setFilter } from '../actions/filter';

function FilterButton({ filter }) {
  return (
    <button onClick={filter}>Click</button>
  );
}

export default connect(null, { filter: setFilter })(FilterButton);

使用命名约定：

 import { setFilter, clearFilter } from '../actions/filter';

function FilterButton({ setFilterConnect, clearFilterConnect }) {
  return (
    <button onClick={setFilterConnect} onBlur={clearFilterConnect}>Click</button>
  );
}

export default connect(null, {
  setFilterConnect: setFilter,
  clearFilterConnect: clearFilter,
})(FilterButton);

3. 不要破坏道具的动作。

为什么？

通过显式地使用 props 对象的方法，您一开始就不需要担心阴影。

为什么不？

在所有动作前加上 props / this.props 是重复的（如果你正在解构所有其他非动作道具，则不一致）。

如何？

 import { setFilter } from '../actions/filter';

function FilterButton(props) {
  return (
    <button onClick={props.setFilter}>Click</button>
  );
}

export default connect(null, { setFilter })(FilterButton);

4.导入整个模块。

为什么？

它很简洁。

为什么不？

其他开发人员（或您未来的自己）可能无法理解正在发生的事情。根据您遵循的风格指南，您可能会违反 no-wildcard-imports 规则。

如何？

如果您只是从一个模块传入动作创建者：

 import * as actions from '../actions/filter';

function FilterButton({ setFilter }) {
  return (
    <button onClick={setFilter}>Click</button>
  );
}

export default connect(null, actions)(FilterButton);

如果您传入多个模块，请使用 带有 rest 语法的对象解构：

 import * as filterActions from '../actions/filter';
import * as otherActions from '../actions/other';

// all exported actions from the two imported files are now available as props
function FilterButton({ setFilter, clearFilter, setOther, clearOther }) {
  return (
    <button onClick={setFilter}>Click</button>
  );
}

export default connect(null, { ...filterActions, ...otherActions })(FilterButton);

并且由于您在评论中提到了对 ES6 简洁语法的偏好，所以不妨使用隐式返回的箭头函数：

 import * as actions from '../actions/filter';

const FilterButton = ({ setFilter }) => <button onClick={setFilter}>Click</button>;

export default connect(null, actions)(FilterButton);

原文由 jabacchetta 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

第五个选项：

5. 通过 eslintrc 规则允许特定例外。

 module.exports = {
  rules: {
    'no-shadow': [
      'error',
      {
        allow: ['setFilter'],
      },
    ],
  }
}

为什么？

您不想要可变阴影，但在某些情况下无法绕过它。

为什么不？

您 真的 不希望代码库中存在变量阴影。 😝

原文由 GollyJer 发布，翻译遵循 CC BY-SA 3.0 许可协议