使用继承的ES6反应类时未触发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;

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 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

Answer 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”，您可以将它们实现为 mixin 或简单地作为“子组件”。

这可能看起来像这样：

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>  
        );
    }
}

编辑：也可能：

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>
    }
}

编辑#2：上面的代码可以很好地使用 es5/jsx 语法。

演示版