Реагировать наследование компонентов ES6: работает, но не рекомендуется?

Question

Я в настоящее время наследование ES6 Реагировать базовый компонент следующим образом:

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 - вместо этого я должен использовать композицию. Но опять же, Mixins не поддерживаются в React v0.13?

Итак, это подход, который я принимаю выше ОК? Если нет, то в чем проблема, и как мне это сделать?

Answer 1

Команда Facebook рекомендует использовать «идиоматические концепции JavaScript» при написании кода React, а поскольку для классов 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);