反应 ;使用 ESLint 规则解构 props 分配

Question

使用 ESLing 插件进行反应我对解构和道具类型验证感到困惑。在 class 中，如下所示

class Game extends Component {

  componentWillMount() {
    this.props.createNewPlayer(); //  Must use destructuring props assignment (react/destructuring-assignment)
  }

  render() {
    const { players } = this.props; // 'players' is missing in props validation (react/prop-types)
    const count = Object.keys(players).length;
    return (...);
  }
}

GameInit.propTypes = {createNewPlayer: PropTypes.func.isRequired};

const mapStateToProps = state => ({players: state.players});

export default connect(mapStateToProps,{ createNewPlayer })(Game);

所以如果我将第一部分的解构重写为

  componentWillMount() {
    const {createNewPlayer}=this.props; // 'createNewPlayer' is already declared in the upper scope. (no-shadow) 
    createNewPlayer();
  }

如果我将 proptypes 重写为

并且用于解构播放器

GameInit.propTypes = {
  createNewPlayer: PropTypes.func.isRequired,
  players: PropTypes.object.isRequired, // Prop type `object` is forbidden (react/forbid-prop-types)
};

在这里遵循 ESLint 规则的正确方法是什么？不改变 .eslintrc

中的规则

Answer 1

这可能会解决您的第一个问题：

const {createNewPlayer: createNewPlayerAlt } = this.props;
createNewPlayerAlt();

对于第二部分，您应该在此处指定您拥有的对象类型。

所有属性都是字符串的对象：

players: PropTypes.objectOf(PropTypes.String)

所有属性都是数字的对象：

players: PropTypes.objectOf(PropTypes.Number)

你有混合属性吗？然后选择 shape:

player: PropTypes.shape({
    id: PropTypes.string,
    playerNumber: PropTypes.number
  }),

反应 ;使用 ESLint 规则解构 props 分配

Reactjs ; destructuring props assignment with ESLint rules

reactjs

eslint

react-redux

eslint-config-airbnb