react部分常用插件

常用获取服务器API接口的数据插件

1.axios

安装：利用npm安装axios：npm install axios --save

在使用地方引入：import axios from 'axios'

具体操作：

var api='此处填写地址';

axios.get(api)

     .then(function (response) {

            console.log(response);

        })

        .catch(function (error) {

            console.log(error);

        });

2.fetch-jsonp

安装：利用npm安装：axiosnpm install fetch-jsonp  --save

在使用地方引入：import fetchJsonp from 'fetch-jsonp'

具体操作：

 fetchJsonp('/users.jsonp')

        .then(function(response) {

          return response.json()

        }).then(function(json) {

          console.log('parsed json', json)

        }).catch(function(ex) {

          console.log('parsing failed', ex)

        })

改变盒子大小插件

1.react-resizable

安装：利用npm安装：npm install --save react-resizable

在使用地方引入：

import {Resizable,ResizableBox} from 'react-resizable';

import 'react-resizable/css/styles.css';

具体操作：

export default class Demo extends React.Component{

constructor(){

super();

this.state = {

width: 600

}

}

onResize = (event, { element, size }) => {

this.setState({width: size.width})

}

 

render(){

return (

<Resizable axis='x' height={height} width={this.state.width} onResize={this.onResize} resizeHandles={['w']}>

<div>要调整盒子</div>

</Resizable>

)

}

}

保持路由与应用状态(state)同步

1.react-router-redux

安装：利用npm安装：npm install --save react-router-redux@next

在使用地方引入：

import {Provider} from 'react-redux';

import LocaleProvider from 'antd/lib/locale-provider';

import createBrowserHistory from 'history/createBrowserHistory';

import { ConnectedRouter} from 'react-router-redux';

具体操作：

<LocaleProvider locale={zhCn}>

            <Provider store={store}>

                <ConnectedRouter history={history}>

                    <Switch>

                        <Route exact strict path="/" component={HomePage}/>

                        <Route path='/login' component={Login}/>

                        <Route path='/uums/' component={Uums}/>

                    </Switch>

                </ConnectedRouter>

            </Provider>

        </LocaleProvider>

路由

1.react-router-dom

在使用地方引入：

  import {Link,Route,BrowserRouter as Router} from 'react-router-dom'

具体操作：

<Router>

  <div>

    <ul>

      <li><Link to="/">首页</Link></li>

      <li><Link to="/hot">热消</Link></li>

      <li><Link to="/zhuanlan">我的</Link></li>

    </ul>

    <hr/>

    <Route  exact path="/" component={App}></Route>

    <Route path="/hot" component={Hot} ></Route>

    <Route path="/user" component={user}></Route>

  </div>

</Router>