Reactで抽象クラスみたいなことをしたいときの解法 ref: http://qiita.com/suisho/items/0be6b17e04922418f482

bad.jsx

class Icon extends React.Component{
  activeClass(){
    throw new Error("Not implemented error")
  }
  inactiveClass(){
    throw new Error("Not implemented error")
  }
  render(){
    var {key, active} = this.props;
    const classes = active ? this.activeClass() : this.inactiveClass()
    const cls = classNames("fa", classes);
    return (<i
      key={key}
      className={cls}
    />);
  }
}

class StarIcon extends Icon{
  activeClass(){
    return "fa-star"
  }
  inactiveClass(){
    return "fa-star-o"
  }
}

file1.txt

  var props = {};
  props.foo = x;
  props.bar = y;
  var component = <Component {...props} />;

file3.txt

Icon.PropTypes = {
  clssName: React.PropTypes.string,
  key: React.PropTypes.string,
}
StarIcon.PropTypes = {
  active: React.PropTypes.boolean
}

good.jsx

class Icon extends React.Component{
  render(){
    var {key, classNames} = this.props;
    const classes = cx("fa", classNames);
    return (<i
      key={key}
      className={classes}
    />);
  }
}

class StarIcon extends React.Component{
  render(){
    var classNames = this.props.active ? "fa-star" : "fa-star-o"
    return (<LevelIcon { ...this.props } 
        classNames={classNames} />)
  }
}