React ES6组件继承:工作,但不推荐？

Question

我目前正在以下列方式继承ES6 React基本组件:

model.js(基本组件):

class ModelComponent extends React.Component {

    render() {
        // Re-used rendering function (in our case, using react-three's ReactTHREE.Mesh)
        ...
    }

}

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

export default ModelComponent;

然后我有两个扩展组件,看起来基本上都是这样的:

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的正确方法 - 而是我应该使用组合.但是再一次,React v0.13不支持Mixins？

那么,我采取的方法是否正常？如果没有,问题是什么,我应该怎么做呢？

Answer 1

Facebook团队在编写React代码时建议"使用惯用的JavaScript概念",并且由于ES6类没有mixin支持,因此您应该只使用组合(因为您只是使用惯用的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
}

然后您可以使用组合函数,如下所示:

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