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;

（Full source code here）

这似乎工作正常。两种型号都出现并且正如我所期望的那样工作。

但是，我已经在多个地方读过继承不是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);

React ES6组件继承：工作，但不推荐？

1 个答案: