如何解决具有相同名称的道具和模块导入之间的 eslint 冲突？答案

【问题标题】：How do I resolve eslint conflict between props and module imports with the same name?如何解决具有相同名称的道具和模块导入之间的 eslint 冲突？
【发布时间】：2019-05-19 12:08:26
【问题描述】：

我将 react 与 react-redux 和 eslint 一起使用。在我的容器中，我导入了一个动作，该动作将绑定到 mapDispatchToProps 中的组件道具，如下所示：

// simplified for brevity
import { getGames } from '../actions/game';

const mapDispatchToProps = dispatch => ({
  getGames: () => dispatch(getGames())
});

class App extend React.Component {
  // class members
}

export default App connect(mapDispatchToProps)(App);

我在 componentDidMount 中调用 getGames：

  componentDidMount () {
    const { getGames } = this.props;
    getGames().then(json => console.log(json));
  }

Eslint 坚持我使用对象解构从 componentDidMount 中的 this.props 中提取值，这很好。

问题是，当我使用对象解构时，eslint 还抱怨 getGames 已经在外部范围（导入语句）中声明。

我想在这两种情况下都使用 eslint，但想不出我会如何在导入和 this.props 解构中使用对象解构而不引起命名冲突。

非常感谢任何想法！

【问题讨论】：

能否提供被投诉的 eslint 规则名称？这可能会有所帮助。

标签： reactjs redux react-redux eslint

【解决方案1】：

// simplified for brevity
import { getGames } from '../actions/game';

你可以使用别名。

import { getGames as getGames1 } from '../actions/game';

并改用别名。

【讨论】：