react js;使用 ESLint 规则解构 props 分配

Question

使用 ESLing 插件进行 react ，我在解构和 prop 类型验证方面感到困惑。 在类中如下所示

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)

您有混合属性吗？然后使用形状:

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