7

注意：这篇文章是在 React 不支持 ES6 (v12) 时发布的。

我有一个 ES6 课程：

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

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

我可以使用这个表达式在 ES6 中导出（来源：react ES6 browserify）

export default React.createClass(BaseClass.prototype)

这工作正常。现在我想使用 ES6 继承来扩展我的BaseClass类：

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

但是当我React.createClass在ExtendedClass课堂上打电话时，我得到了以下异常：

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);
4

2 回答 2

6

有一篇关于在 ES6 中编写 ReactJS 的好文章。

http://ilikekillnerds.com/2015/02/developing-react-js-components-using-es6/

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

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

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

代码如下：

卡组件：

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 }
于 2015-07-26T08:38:35.977 回答
1

这是我找到的解决方法：

在React.js库内部，我更新了ReactCompositeComponentInterface添加自定义策略constructor（据我所知，无法正确自定义此“界面”）：

var ReactCompositeComponentInterface = {

/**
 * An array of Mixin objects to include when defining your component.
 *
 * @type {array}
 * @optional
 */
mixins: SpecPolicy.DEFINE_MANY,

/**
 * Custom policy for 'constructor'
 */
constructor: SpecPolicy.DEFINE_MANY,

  ...

}

然后在 中ExtendedClass，即使您不自定义它们，您也必须重新定义每个方法：

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

我对这个肮脏的解决方案不满意，但它会在等待 0.13 版本时完成工作，希望能解决这些问题。

于 2014-12-01T20:29:53.840 回答