我有以下组件(radioOther.jsx):

 'use strict'; 
 
 //module.exports = <-- omitted in update 
 
   class RadioOther extends React.Component { 
 
     // omitted in update  
     // getInitialState() { 
     //    propTypes: { 
     //        name: React.PropTypes.string.isRequired 
     //    } 
     //    return { 
     //       otherChecked: false 
     //   } 
     // } 
 
     componentDidUpdate(prevProps, prevState) { 
         var otherRadBtn = this.refs.otherRadBtn.getDOMNode(); 
 
         if (prevState.otherChecked !== otherRadBtn.checked) { 
             console.log('Other radio btn clicked.') 
             this.setState({ 
                 otherChecked: otherRadBtn.checked, 
             }); 
         } 
     } 
 
     onRadChange(e) { 
         var input = e.target; 
         this.setState({ 
             otherChecked: input.checked 
         }); 
     } 
 
     render() { 
         return ( 
             <div> 
                 <p className="form-group radio"> 
                     <label> 
                         <input type="radio" 
                                ref="otherRadBtn" 
                                onChange={this.onRadChange} 
                                name={this.props.name} 
                                value="other"/> 
                         Other 
                     </label> 
                     {this.state.otherChecked ? 
                         (<label className="form-inline"> 
                             Please Specify: 
                             <input 
                                 placeholder="Please Specify" 
                                 type="text" 
                                 name="referrer_other" 
                                 /> 
                         </label>) 
                         : 
                         ('') 
                     } 
                 </p> 
             </div> 
         ) 
     } 
 }; 

在使用 ECMAScript6 之前一切都很好，现在我收到 1 个错误、1 个警告，并且我有一个后续问题:

Error: Uncaught TypeError: Cannot read property 'otherChecked' of null

Warning: getInitialState was defined on RadioOther, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?

1. 任何人都可以看到错误所在，我知道这是由于 DOM 中的条件语句造成的，但显然我没有正确声明其初始值？

2. 我应该将getInitialState设为静态

3. 如果 getInitialState 不正确，在哪里声明我的 proptypes 的适当位置？

更新:

   RadioOther.propTypes = { 
       name: React.PropTypes.string, 
       other: React.PropTypes.bool, 
       options: React.PropTypes.array } 
 
   module.exports = RadioOther; 

@ssorallen，此代码:

     constructor(props) { 
         this.state = { 
             otherChecked: false, 
         }; 
     } 

产生“ Uncaught ReferenceError :未定义”，而下面更正了该错误

     constructor(props) { 
     super(props); 
         this.state = { 
             otherChecked: false, 
         }; 
     } 

但是现在，单击另一个按钮会产生错误:

未捕获类型错误:无法读取未定义的属性“props”

请您参考如下方法:

ES6 类中不使用
• getInitialState。而是在构造函数中分配 this.state。
• propTypes 应该是静态类变量或分配给类，不应该分配给组件实例。
• 成员方法不是"auto-bound"在 ES6 类(class)中。对于用作回调的方法，可以使用 class property initializers或者在构造函数中分配绑定(bind)实例。

export default class RadioOther extends React.Component { 
 
  static propTypes = { 
    name: React.PropTypes.string.isRequired, 
  }; 
 
  constructor(props) { 
    super(props); 
    this.state = { 
      otherChecked: false, 
    }; 
  } 
 
  // Class property initializer. `this` will be the instance when 
  // the function is called. 
  onRadChange = () => { 
    ... 
  }; 
 
  ... 
 
} 

请参阅 React 文档中有关 ES6 类的更多信息:Converting a Function to a Class