如何创建一个类和另一个类扩展该类在反应js

我是一个初学者在反应js，之前反应我正在与angular2和骨干，现在我的问题是我想创建一个类，使所有的我从我的分机功能使用其他组件如何创建一个类和另一个类扩展该类在反应js

class Ext { 

    get(url){ 

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

    } 
}

：我的请求，从该类发送，这样

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

如何从分机扩展???什么是最好的方法？

来源

2016-06-08 Alireza Valizade

所以有一点要记住，React是一个视图库，而不是其他任何东西。所以当你创建组件时，你需要在组件被装载到DOM时调用ajax调用？ Facebook有一个https://facebook.github.io/react/tips/initial-ajax.html的例子。 –

!!!!我看到它，TNX和不想让我的代码重复！真的需要一个结构..这不是OOP ...所以一般来说，在反应不能使用另一个类的功能??！ –

我不这么说，你基本上可以利用其他模块。所以你的数据获取可以是另一个模块的一部分，因为你使用的是es6。然后您的组件可以使用该模块来执行数据提取，并且组件可以调用该模块。我也建议看看redux：https：//github.com/reactjs/redux。这是一个非常简单的通量实现 –

如果您的get(url)方法是一般性的，将它作为单独模块的一部分，然后将其导入并用于您想要的任何组件中将是明智之举。

另一方面，如果您希望在反应组件中实现正确的功能，则新的ES2015方法将使用组合。

您首先创建所谓的HOC（高阶组件），它基本上只是一个函数，它接受现有组件并返回包装它的另一个组件。它封装了你的组件，并为它提供了你想要的功能，就像mixin一样，但是通过使用组合来代替。

所以，你的例子看起来是这样的：

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

来源

2016-06-09 00:47:45 levon

我认为在get函数中，你的意思是返回一个promise，并将setState绑定到成功调用的结果 –

如何创建一个类和另一个类扩展该类在反应js

回答

相关问题