javascript - 如何在 React JS 中创建一个类和另一个类扩展该类

Question

我是 React js 的初学者，在 React 之前我一直在使用 angular2 和 backbone，现在我的问题是我想创建一个类，以便我的所有请求都从这个类发送，如下所示:

class Ext {

    get(url){

        $.ajax({
            url : url,
            success : function(res){},
            and ......
        });

    }
}

在我的另一个组件中使用我的 Ext 函数:

export default Ext;

import React from 'react';
import {render} from 'react-dom';
import {Ext} from "./module/Ext"

class App extends React.Component {

    constructor(props) {
        super(props);

      ///  Ext.get();

    }

    render () {
        return(
        <p> Hello React!</p>
        );
    }
}

render(<App/>, document.getElementById('app'));

如何从 Ext 扩展？？？什么是最好的方法？

Answer 1

如果您的 get(url) 方法是通用的，那么将它作为单独模块的一部分是明智的，然后在您想要的任何组件中导入和使用它。

另一方面，如果您想在 React 组件中直接实现功能，新的 ES2015 方法是使用组合。

您首先创建所谓的 HOC(高阶组件)，它基本上只是一个函数，它接受一个现有组件并返回另一个包装它的组件。它封装了您的组件并为其提供了您想要的功能，就像使用 mixins 一样，但使用的是组合。

所以你的例子看起来像这样:

import React from 'react';

export default const Ext = (Component) => class extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    let result = this.get('some_url').bind(this)
    this.setState({ result })
  }

  get(url) {
    $.ajax({
        url : url,
        success : function(res){
          return res;
        }
    });
  }

  render() {
    // pass new properties to wrapped component
    return <Component {...this.props} {...this.state} />
  }
};

然后你可以创建一个无状态的功能组件并用 HOC 包装它:

import React from 'react';
import Ext from './module/Ext';

class App {
    render () {
        return <p>{this.result}</p>;
    }
}
export default Ext(App); // Enhanced Component

或者使用 ES7 装饰器语法:

import { Component } from 'react';
import Ext from './module/Ext';

@Ext
export default class App extends Component {
    render () {
        return <p>{this.result}</p>;
    }
}

您可以阅读这篇文章了解更多详情:http://egorsmirnov.me/2015/09/30/react-and-es6-part4.html