reactjs - 使用继承的 ES6 React 类时未触发 componentDidMount 方法

Question

我试图在 React 中使用 ES6 类，并希望我的所有组件都继承某些方法，但是一旦我尝试扩展扩展 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;

示例组件.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 Mounted”永远不会记录到控制台，并且不会呈现任何内容。你知道我做错了什么吗？

Answer 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