componentDidMount方法反应类

Question

我想，但是只要使用阵营内部ES6类，希望我的所有组件继承某些方法，我尽量延长它扩展了反应的成分。组件类，componentDidMount方法不会触发，因此不会呈现任何内容。我使用的阵营0.13.3

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

，我正在使用的代码并使用babelify 6.1.2进行传输。

字符串“exampleComponent安装”永远不会被记录到控制台，并没有呈现。任何想法我做错了什么？

Answer 1

我认为，问题是，你不能建立更深层的阶级结构的反应的组分。此外，你不应该需要它。在你的例子中，BaseComponent无论如何都是无用的。如果你想创建“BaseComponents”

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

，你可以实现它们作为混入或简称为“子组件”：

试试这个。

这可能是这样的：

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语法。

DEMO

Answer 2

我不知道的方法，但是这个代码也可以工作：

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

UPD：这被认为是一种不好的做法，但：

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