在React类上调用构造函数时会发生不变违规

问题描述

我开始使用React，当时我试图定义一个具有构造函数类的新组件。 我更复杂的元素无法正常工作，因此我尝试了从文档中看到的示例。 这是我的JS文件

let React = require('react');

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };

React.render(
  <Counter />,
  document.getElementById('content')
);

直接取自React的文档。 但是，当我加载页面时，出现错误Uncaught Error: Invariant Violation: ReactClassInterface: You are attempting to define 'constructor' on your component more than once. This conflict may be due to a mixin. Uncaught Error: Invariant Violation: ReactClassInterface: You are attempting to define 'constructor' on your component more than once. This conflict may be due to a mixin. 在控制台中。

现在，我在整个应用程序中使用Material UI和React-Router，并已加载到我的Vendor文件中，但在此文件中我根本不需要它们。 关于这可能是什么想法？

非常感谢Kyle和Gabdallah进行了测试并确认它可以正常工作。 事实证明，是材料UI弄乱了代码（巧合的是，我不建议这样做-太严格了，不能满足我的口味）。

重申一下，此示例直接来自React文档，是使用ES6的推荐方法。 希望这对以后的人有所帮助！