javascript - react 使用ES6的写法，PropTypes为何不生效？

Question

import React from 'react';
import ReactDOM from 'react-dom';

let data = 123;

class MyTitle extends React.Component {

    //static propTypes = {
    //    title: React.PropTypes.string.isRequired
    //};//用这种方式则报错

    render() {
        return <h1> {this.props.title} </h1>;
    }
}

MyTitle.propTypes = {
    title: React.PropTypes.string.isRequired
};//验证不生效

ReactDOM.render(
    <MyTitle title={data}/>,
    document.getElementById('example')
);

Answer 1

类属性不是ES6的提案，需要babel支持

http://babeljs.io/docs/plugins/transform-class-properties/

Answer 2

这是es7的写法，需要在babel设置的query里面加上stage-0

npm install babel-preset-stage-0 -D

{
    test: /\.(js|jsx)$/,
    loader: 'babel',
    query: {
        presets: ['es2015', 'react', 'stage-0']
    ｝
}

Answer 3

    //static propTypes = {
    //    title: React.PropTypes.string.isRequired
    //};//用这种方式则报错

1. static method 而不是 static property

2. = 语法不对

Answer 4

我也是这样的情况，错误提示缺少类关键转换，不知道错在那一步。

Answer 5

ES6 class语法创建组件，其内部只允许定义方法，而不能定义属性，class的属性只能定义在class之外。所以propTypes要写在组件外部,getDefaultProps也要写在外部。

class MyTitle extends React.Component {
    render() {
        return <h1> {this.props.title} </h1>;
    }
}

MyTitle.propTypes = {
    title: React.PropTypes.string.isRequired
};

Mytitle.defaultProps = {
        title : "this is default title"
}