Javascript React与ES6遗传

注意：此帖子在React不支持ES6（v12）时发布

我有ES6课程：

class BaseClass {
  getInitialState(){
      return {message: 'Hello!'};
  }

  render() {
      return (
            <div>
                <div>{this.state.message}</div>
            </div>
        )
  }
}

这个很好用。现在我想使用ES6继承来扩展我的

基类

类：

class ExtendedClass extends BaseClass{
    getInitialState(){
        return {message: "Hello! I'm an extension"};
    }
}

但是当我在

ExtendedClass

类上调用

React.createClass

时，我得到了以下异常：

Invariant Violation: ReactCompositeComponentInterface: You are attempting to define `constructor` on your component more than once. This conflict may be due to a mixin.

我知道React 0.13应该对ES6更友好，但是有什么方法可以解决这个问题吗

编辑：

我正在使用Traceur编译我的ES6类。

ExtendedClass

的输出如下所示：

function ExtendedClass() {
  "use strict";
  if (BaseClass !== null) {
    BaseClass.apply(this, arguments);
  }
}
for (BaseClass____Key in BaseClass) {
    if (BaseClass.hasOwnProperty(BaseClass____Key)) {
      ExtendedClass[BaseClass____Key] = BaseClass[BaseClass____Key];
    }
  }
  ____SuperProtoOfBaseClass = BaseClass === null ? null : BaseClass.prototype;
  ExtendedClass.prototype = Object.create(____SuperProtoOfBaseClass);
  ExtendedClass.prototype.constructor = ExtendedClass;
  ExtendedClass.__superConstructor__ = BaseClass;
  ExtendedClass.prototype.getInitialState = function() {
    "use strict";
    return {message: "Hello! I'm an extension"};
  };
  React.createClass(ExtendedClass.prototype);

---

以下是我找到的解决方法：

在

React.js

库中，我更新了

ReactCompositeComponentInterface

以添加

构造函数的自定义策略（据我所知，无法正确自定义此“接口”）：

然后在
扩展类中
，您必须重新定义每个方法，即使您没有自定义它们：

class ExtendedClass extends BaseClass{
    getInitialState(){
        return {message: "Hello! I'm an extension"};
    }
    /** required */
    render(){
        return super.render();
    }
}

我对这个肮脏的解决方案不满意，但它可以完成等待0.13版本的工作，希望能够解决这些问题。
有一篇关于在ES6中编写ReactJS的文章


无论如何，在使用ES6时，您不会使用React.createClass。您只需创建扩展React.Component的类

同样在ES6中，您没有getInitialState not defaultProps。在构造函数中使用this.state替换它

看看这个例子。假设您有卡组件和扩展卡组件的欢迎面板

代码如下：

卡组件：

import React , { Component } from 'react'
class Card extends Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <div className="card">
           <div className="card__content">
             <label>{this.props.content}</label>
           </div>
      </div>
      )
  }

  initPanel(el,content){
    React.render( <Card content={content} />, el);   
  }
}

export default Card;

import React from 'react';
import Card from 'components/card.component';

class WelcomePanel extends Card {
  constructor(props){
    super(props);
    this.state = {
      content: "Welcome Panel",
      index: 0
    }
  }

  componentClicked(){
    this.setState({content: "Component Clicked", index: this.state.index + 1})
  }

  render() {
    return (
      <div className="welcome-panel" onClick={this.componentClicked.bind(this)}>
         <Card content={`${this.state.content} ${this.state.index > 0 ? this.state.index  : ''} ${this.state.index > 0 ? 'times' : ''} `} />
      </div>
      )
  }

  initPanel(el,content){
    React.render( <WelcomePanel />, el);   
  }
}

export default { Class: WelcomePanel }

import React，{Component}来自“React”
类卡扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.content}
)
}
初始化面板（el，目录）{
反应。渲染（，el）；
}
}
导出默认卡；

欢迎面板组件：

import React , { Component } from 'react'
class Card extends Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <div className="card">
           <div className="card__content">
             <label>{this.props.content}</label>
           </div>
      </div>
      )
  }

  initPanel(el,content){
    React.render( <Card content={content} />, el);   
  }
}

export default Card;

import React from 'react';
import Card from 'components/card.component';

class WelcomePanel extends Card {
  constructor(props){
    super(props);
    this.state = {
      content: "Welcome Panel",
      index: 0
    }
  }

  componentClicked(){
    this.setState({content: "Component Clicked", index: this.state.index + 1})
  }

  render() {
    return (
      <div className="welcome-panel" onClick={this.componentClicked.bind(this)}>
         <Card content={`${this.state.content} ${this.state.index > 0 ? this.state.index  : ''} ${this.state.index > 0 ? 'times' : ''} `} />
      </div>
      )
  }

  initPanel(el,content){
    React.render( <WelcomePanel />, el);   
  }
}

export default { Class: WelcomePanel }

从“React”导入React；
从“组件/Card.component”导入卡片；
类WelcomePanel扩展卡{
建造师（道具）{
超级（道具）；
此.state={
内容：“欢迎小组”，
索引：0
}
}
componentClicked（）{
this.setState（{content:“Component Clicked”，索引：this.state.index+1}）
}
render（）{
返回(
0？this.state.index:'}${this.state.index>0？'times'：'}`}}/>
)
}
初始化面板（el，目录）{
反应。渲染（，el）；
}
}
导出默认值{Class:WelcomePanel}
getInitialState不应与es6代码一起使用。相反，在构造函数中设置初始状态，
constructor（props）{super（props）；this.state={message:'Hello！'}
在React不支持ES6（v12）时发布了此帖子。这已经不相关了。当然，对于React v13，一切都很好，不需要使用上面提到的解决方法。