使用继承的 ES6 react类时未触发 componentDidMount 方法

IT技术 reactjs ecmascript-6
2021-05-14 13:23:00

我正在尝试在 React 中使用 ES6 类，并希望我的所有组件都继承某些方法，但是一旦我尝试扩展一个扩展 React.Component 类的组件，componentDidMount 方法就不会触发，因此什么也没有被渲染。我正在使用的代码：

基础组件.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;

应用程序.jsx

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

我正在使用 React 0.13.3，并使用 babelify 6.1.2 进行转译。

字符串“exampleComponentmounted”永远不会被记录到控制台，也不会呈现任何内容。任何想法我做错了什么？

2个回答

我不确定该方法，但此代码也有效：

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

我认为，问题在于您无法为 React 组件创建更深层次的类结构。此外，您不应该需要它。在您的示例中，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 语法。

演示

其它你可能感兴趣的问题
上一篇错误“自定义关键字定义无效：data.errors 应该是布尔值” 下一篇TS1128：预期的声明或语句（文件结尾）