reactjs - 如何在 ES6 中正确添加 propTypes 到 React 组件？

Question

我正在将 React 组件编写为 ES6 类。我尝试添加 propTypes 并且 Meteor 引发了此错误 类属性后面需要分号。这是我的组件:

class MainLayout extends Component {
  propTypes: {
    content: React.PropTypes.element
  }

  componentDidMount () {
    $(window).load(() => {
      $('.flexslider')
      .flexslider(
        { animation: 'fade', animationSpeed: 1500, controlNav: false }
      );
    });
  }

  render () {
    return (
      <div>
        <Header/>
        {/* Content */}
        { this.props.content }
      </div>
    );
  }
}

我该如何解决这个问题？

Answer 1

使用 es6 类 Synax，您无法在类定义中设置类的静态属性。

所以基本上，而不是

class MainLayout extends Component {
  propTypes: {
    content: React.PropTypes.element
  }
  ..
}

应该是

class MainLayout extends Component {
  ...
}

MainLayout.propTypes = {
  content: React.PropTypes.element
}

使用 es7 类，您可以像这样定义 proptypes，但这更符合您的期望:

class MainLayout extends Component {
  static propTypes = {
    content: React.PropTypes.element
  }
  ..
}