phương pháp componentDidMount không được kích hoạt khi sử dụng ES6 thừa hưởng phản ứng lớp

Question

Tôi đang cố gắng sử dụng các lớp học ES6 bên trong Phản ứng, và muốn tất cả các thành phần của tôi để kế thừa phương pháp nhất định, tuy nhiên ngay sau khi tôi cố gắng để mở rộng một thành phần mà mở rộng Phản ứng. Lớp thành phần, phương thức componentDidMount không kích hoạt và do đó không có gì được hiển thị. Mã Tôi đang sử dụng:

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

Tôi đang sử dụng Phản ứng 0.13.3, và sử dụng babelify 6.1.2 để transpile.

Chuỗi 'exampleComponent gắn' không bao giờ được ghi lại để an ủi, và không có gì là ra. Bất kỳ ý tưởng những gì tôi đang làm sai?

Answer 1

Tôi nghĩ, vấn đề là bạn không thể tạo cấu trúc lớp sâu hơn cho các thành phần phản ứng. Ngoài ra, bạn không cần phải có nó. Trên ví dụ của bạn, BaseComponent là vô dụng.

Hãy thử điều này thay vì:

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

Nếu bạn muốn tạo 'BaseComponents', bạn có thể thực hiện chúng như mixins hoặc đơn giản là 'tiểu thành phần'.

này có thể xem như thế này:

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: Cũng có thể:

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: Trên đang hoạt động tốt với ES5/jsx cú pháp.

DEMO

Answer 2

Tôi không chắc chắn về cách tiếp cận, nhưng mã này cũng làm việc:

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

UPD: đây được coi là một thực tế xấu mặc dù:

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