问使用mapDispatchToProps避免无阴影隐藏错误
EN

Stack Overflow用户

提问于 2016-06-07 06:53:31

回答 5查看 32.5K关注 0票数 90

我有以下组件，它在no-shadow props上触发了一个FilterButton props错误。

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


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

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

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

我知道我可以添加一个评论来抑制警告，但是对每个组件执行它似乎是多余的和乏味的。

reactjs

redux

eslint

react-redux

javascript

回答 5

Stack Overflow用户

发布于 2018-02-09 17:03:28

第五种选择是：

5.通过eslintrc规则允许特定的异常。

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

为什么？

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

为什么不呢？

您的实际上是不希望在代码库中隐藏变量。

票数 14

Stack Overflow用户

发布于 2019-05-05 07:09:44

第六种选择。

6.禁用特定代码行的es-lint规则。

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


// eslint-disable-next-line no-shadow
function FilterButton({ setFilter }) {
  return (
    <button onClick={setFilter}>Click</button>
  );
}

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

或

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


/* eslint-disable no-shadow */
function FilterButton({ setFilter }) {
/* es-lint-enable */
  return (
    <button onClick={setFilter}>Click</button>
  );
}

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

第二种暂时禁用es-lint规则的方法可以用于多行代码，而不是第一行。如果传递更多的参数并将它们划分为多行代码，则会很有用。

为什么？

对于某些用例来说，这是一个简单而合适的选项(例如，您的团队/组织使用特定的es-lint设置，并且不鼓励/禁止修改这些设置)。它禁用代码行中的es-lint错误，但不影响mapDispatchToProps语法，并且该规则在代码行外仍然完全有效。

为什么不呢？

你不想要，或者你被禁止用这样的评论来膨胀你的代码。你不想或者你被禁止去影响你的行为。

票数 8

Stack Overflow用户

发布于 2020-05-15 23:43:11

我调整了4，并实现了我想称之为选项8的目标。

8.以不同名称导入方法

为什么？

它与导入整个模块具有相同的好处，但与其他规则(如不要使用通配符导入(Airbnb) )没有冲突。

为什么不呢？

它添加了一个不必要的变量声明，可能会导致混淆。

怎么做？

对于单一方法的情况

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

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

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