Question

我是react js的初学者，在做出反应之前我正在使用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)方法是通用的，那么将它作为单独模块的一部分是明智的，然后导入并在你想要的任何组件中使用它。

另一方面，如果你想在反应组件中实现一个功能，那么新的ES2015方法就是使用Composition。

首先创建所谓的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

如何创建一个类，另一个类在react js中扩展该类

1 个答案: