react常用模块包

react-document-title

修改react标题
npm install --save react-document-title

    import React, { Component } from 'react'
    import DocumentTitle from 'react-document-title'

    export default class App extends Component {
        render() {
            return (
                <div>
                    <DocumentTitle title={this.state.title}>
                        <div>内容</div>
                    </DocumentTitle>
                </div>
             
            )
        }
    }
      

react-helmet

管理对文档头的所有更改
npm install --save react-helmet

    import React, { Component } from 'react'
    import { Helmet } from 'react-helmet'

    export default class App extends Component {
        render() {
            return (
                <div>
                    <Helmet>
                        <meta charSet='utf-8' />
                        <title>{title}</title>
                        <meta name='keywords' content={title} />
                    </Helmet>
                </div>
             
            )
        }
    }
      

react-amap

Amap地图使用
npm install --save react-amap

    import React, { Component } from 'react'
    import Map from 'react-amap/lib/map'
    import Marker from 'react-amap/lib/marker'
    
    const randomPosition = () => ({
        longitude: 113.27,
        latitude: 23.13
    })
    
    export default class App extends Component {
        constructor(props) {
            super(props)
            this.state = {
                mapCenter: randomPosition()
            }
        }
        render() {
            return (
                <div>
                    <div style={{ width: 600, height: 400 }}>
                        <Map zoom={18} center={this.state.mapCenter}>
                            <Marker position={this.state.mapCenter} ><div style={{ width: 100, height: 30, fontSize: 16}}>广州越秀区</div></Marker>
                        </Map>
                    </div>
                </div>
            )
        }
    }
      

react-bootstrap

Bootstrap框架使用

npm install --save react-bootstrap
npm install --save bootstrap

注意安装包的版本

    import React, { Component } from 'react'
    import { Modal, Button } from 'react-bootstrap'

    export default class App extends Component {
        render() {
            return (
                <div>
                    <Button bsStyle="success" bsSize="small" onClick={() => {this.showModal()}}>
                        显示模态框
                    </Button>
                    <Modal show={this.state.isShowModal}>
                        <Modal.Header>
                            <Modal.Title className="text-center">标题</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            <div className="portlet-body">内容</div>
                        </Modal.Body>

                    </Modal>
                </div>
            )
        }
    }
      

主入口的App.js写入

import 'bootstrap/dist/css/bootstrap.css'

redux-form

用于管理redux中的form表单数据

npm install --save redux-form

import React from 'react'
import { Field, reduxForm } from 'redux-form'

const SimpleForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>First Name</label>
        <div>
          <Field
            name="firstName"
            component="input"
            type="text"
            placeholder="First Name"
          />
        </div>
      </div>
      <div>
        <button type="submit" disabled={pristine || submitting}>
          Submit
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'simple' // a unique identifier for this form
})(SimpleForm)

reducers.js文件

import { combineReducers } from 'redux'
import { reducer as reduxFormReducer } from 'redux-form'

export default combineReducers({
    form: reduxFormReducer
})