Метод componentDidMount не запускается при использовании унаследованного класса реакции ES6

Я пытаюсь использовать классы ES6 внутри React и хочу, чтобы все мои компоненты наследовали определенные методы, однако, как только я попытаюсь расширить компонент, который расширяет класс React.Component, метод componentDidMount не запускает и, следовательно, ничего не получается. Код, который я использую:

BaseComponent.jsx

import React from 'react';

class BaseComponent extends React.Component {

    constructor() {
        super();   
        console.log('BaseComponent constructor');
     }

     render() {
         return (
             <div>Hello, Im the base component</div>  
         );
     }
}

export default BaseComponent;

ExampleComponent.jsx

import BaseComponent from './BaseComponent';

class ExampleComponent extends BaseComponent {
     constructor(props) {

        super(props);
     }

     componentDidMount() {
         console.log('exampleComponent mounted');
     }

    render() {
        return (
            <div>Hello, Im the example component</div>  
        );
    }
}

export default ExampleComponent;

App.jsx

import React from 'react';
React.render(<ExampleComponent />, document.body);

Я использую React 0.13.3 и использую babelify 6.1.2 для пересылки.

Строка 'exampleComponent installed' никогда не регистрируется на консоли, и ничего не отображается. Любые идеи, что я делаю неправильно?

Ответ 1

Я не уверен в этом подходе, но этот код также работает:

export default class Service extends BaseComponent {
  componentDidMount(...args) {
    super.componentDidMount.apply(this, args);
  }
}

UPD: это считается плохой практикой:

a) https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4 b) https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750

Ответ 2

Я думаю, проблема в том, что вы не можете создавать более глубокие классовые структуры для реагирующих компонентов. Кроме того, вам не нужно будет этого. В вашем примере BaseComponent бесполезен.

Попробуйте это вместо:

import React from 'react';

export default class ExampleComponent extends React.Component {
     constructor(props) {
        super(props);
     }

     componentDidMount() {
         console.log('exampleComponent mounted');
     }

    render() {
        return (
            <div>Hello, Im the example component</div>  
        );
    }
}

Если вы хотите создать "BaseComponents", вы можете реализовать их как mixins или просто как "субкомпоненты".

Это может выглядеть так:

import React from 'react';
import BaseComponent from './BaseComponent';

export default class ExampleComponent extends React.Component {
     constructor(props) {
        super(props);
     }

     componentDidMount() {
         console.log('exampleComponent mounted');
     }

    render() {
        return (
            <div>
                <div>Hello, Im the example component</div>
                <BaseComponent />
            </div>  
        );
    }
}

EDIT: возможно:

import React from 'react';
import BaseComponent from './BaseComponent';

export default class ExampleComponent extends React.Component {
     constructor(props) {
        super(props);
     }

     componentDidMount() {
         console.log('exampleComponent mounted');
     }

    render() {
        return (
            <BaseComponent
                <div>Hello, Im the example component</div>
            </BaseComponent>
        );
    }
}

// BaseComponent.js
render() {
    return {
        <div>
            <div>Hello, Im the base component</div>
            {this.props.children}
        </div>
    }
}

EDIT # 2. Над кодом отлично работает с синтаксисом es5/jsx.

DEMO