React ES6组件继承：工作，但不推荐？ [英] React ES6 component inheritance: working, but not recommended?

问题描述

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

I'm currently inheriting an ES6 React base component in the following way:

model.js（基本组件）：

model.js (base component):

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;

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

Then I have two extending components that both look basically like this:

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;

（这里的完整源代码）

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

This appears to work fine. Both models are showing up and working as I would expect.

但是，我已经在多个地方读过继承不是React的正确方法 - 而是我应该使用组成。但是再一次，React v0.13不支持Mixins？

However, I have read in multiple places that inheritance is not the correct approach with React - instead I should be using composition. But then again, Mixins are not supported in React v0.13?

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

So, is the approach I'm taking above OK? If not, what's the problem, and how should I do this instead?

推荐答案

Facebook团队建议使用惯用的JavaScript概念在编写React代码时，由于ES6类没有mixin支持，所以应该只使用合成（因为你只是使用了惯用的Javascript函数）。

The Facebook team recommends 'using idiomatic JavaScript concepts' when writing React code, and since there is no mixin support for ES6 classes, one should just use composition (since you are just making use of idiomatic Javascript functions).

In在这种情况下，你可以有一个 composeModal 函数，它接受一个组件并将它包装在一个更高阶的容器组件中。这个高阶组件将包含你想传递给它的所有子节点的逻辑，状态和道具。

In this case, you can have a composeModal function that takes a component and returns it wrapped in a higher-order, container component. This higher-order component will contain whatever logic, state, and props you want passed down to all of its children.

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
}

然后你可以使用这个组合功能如下：

Then you can use the composition function like so:

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组件继承：工作，但不推荐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！