Javascript React ES6组件继承：正常，但不推荐？

我目前以以下方式继承ES6 React基本组件：

model.js（基本组件）：

然后我有两个扩展组件，基本上都是这样的：

import ModelComponent from './model';

class RobotRetroComponent extends ModelComponent {

    constructor(props) {

        super(props);

        this.displayName = 'Retro Robot';

        // Load model here and set geometry & material
        ...

    }

}

export default RobotRetroComponent;

（）

这似乎效果不错。这两种型号都如我所料出现和工作

然而，我在多个地方读到，继承并不是使用React的正确方法，相反，我应该使用composition。但同样，在React v0.13中不支持混合

---

那么，我上面采用的方法行吗？如果没有，问题是什么，我应该怎么做呢？

Facebook团队建议在编写React代码时“使用惯用JavaScript概念”，并且由于ES6类不支持混合，所以应该只使用组合（因为您只是使用惯用JavaScript函数）

在这种情况下，您可以使用一个

composeModal

函数，该函数接受一个组件并将其包装在一个高阶容器组件中返回。这个高阶组件将包含您希望传递给其所有子组件的任何逻辑、状态和道具

export default function composeModal(Component){

   class Modal extends React.Component {

       constructor(props){
           super(props)
           this.state = {/* inital state */}
       }

       render() {
           // here you can pass down whatever you want 'inherited' by the child
           return <Component {...this.props} {..this.state}/>
       }

   }

   Modal.propTypes = {
      // Re-used propTypes
      ...
   };

   return Modal
}

---

React v0.13中支持混合，但在使用ES6类时不支持混合。您仍然可以使用React.createClass（{mixins:[]}）格式来实现mixin功能。谢谢@Crob。那么，这会比使用ES6“类”继承更好吗？我觉得上面的内容更简单…？如果组件的唯一可重复使用部分是它的

渲染

函数及其

属性类型

，那么为什么要让组件用自己的渲染方法来组成它呢？在React中，合成优先于继承。谢谢。我还想重新使用构造函数，用于加载模型。。。我仍然在想，在某些情况下，是否最好只是务实一点&如果有意义的话，就使用继承。毕竟，咒语只是“偏爱”构图而不是继承？（）不过我要把这个标记为已被接受，因为它帮助我想清楚了&我想它会帮助我决定一个解决方案。对于其他观众来说，为了避免混淆，您可能希望将“Model”和“ModelComponent”更改为“Model:）我理解您的意思，从表面上看，继承本身似乎不是错误的方法。然而，React团队不断重复该库本质上是一个“功能性”库，因此我认为组合将更符合这种功能性方法。此外，我们应该记住，使用面向对象模式创建组件的方式在将来可能会被弃用，取而代之的是更具功能性的样式请参见@poshaughnessy有没有可能在任何地方进行最终演示？我正在寻找您提出的确切解决方案，但我仍然发现上面的代码令人困惑，可能是因为名称/演示不清楚。任何帮助都会很棒@西多纳森：很抱歉后续工作进展缓慢。这是我的代码：。我只是暂时删除了继承的基本组件，因为它只有一点点重复的代码。不过，对于我的幻灯片，我现在只是再看一眼：目前每张幻灯片都继承了一个“基本幻灯片”组件。我想我接下来会尝试乔纳森建议的方式……仅仅因为继承可能会在OOP中被过度使用，并且在今天被大肆宣传的技术中被人反对，这并不意味着它是坏的。我很失望。

export default function composeModal(Component){

   class Modal extends React.Component {

       constructor(props){
           super(props)
           this.state = {/* inital state */}
       }

       render() {
           // here you can pass down whatever you want 'inherited' by the child
           return <Component {...this.props} {..this.state}/>
       }

   }

   Modal.propTypes = {
      // Re-used propTypes
      ...
   };

   return Modal
}

import composeModal from './composeModal';

class RobotRetroComponent extends React.Component {

    constructor(props) {
        super(props);
        this.displayName = 'Retro Robot';
        // Load model here and set geometry & material
        ...
    }

    render(){
        return /* Your JSX here */
    }
}

export default composeModal(RobotRetroComponent);