基於antd的react開發（后台管理系統）

一. js 控制跳轉頁面:

可用 <Link to={{ pathname: `url`, state: someData }} >  | |  this.props.match.history.push('url', state)   | |  <Redirect to={url}>路由組件

import React, { Component } from 'react'
import { Link, Redirect } from 'react-router-dom'
Class myTest extends Components {
constrouter(props){
　　super(props)
　　　　this.state = {
　　　　　　redirect:false,
　　　　}
　　}
changePage() {
this.setState({ redirect : true })
}
render() {
　　return(
　　<div>
　　　　{ redirect ? <Redirect push to= {url}> : ' ' } //重定向
　　　　<button onClick={ this.changePage.bind(this) }>點擊改變<button>
　　　 <Link to={{ pathname: `url`, state: someData }}><Button>直接跳轉</Button></Link>
　　</div>
　　)
}
}

二. this.props.match.history

獲取history:頁面級this.props.match.history存在，可把history傳給組件級（this.props.match.history.push == window.location.href）

注：可以通過調用對象的方法從url堆棧中push或者pop url出來。window.history.pushState(null,null,url)就是向當前文檔的url堆棧中push一個新的url。使用window.history.pushState(null,null,url)是不會使用參數url和當前的url拼接產生新的url跳轉的（但頁面級跳轉還是帶參數到url比較妥，以防無痕瀏覽，url長度不超過1000且不是用來在多窗口里通訊的，而是為單頁面 url 狀態管理服務的）。

三. 吐槽，螞蟻金服的antd好多bug啊！！

 1.Select組件下拉列表生成的位置竟然在html最下方,會跟着頁面滾動！！需要<Select>加上getPopupContainer={trigger => trigger.parentNode}屬性

 

 2.Table組件fix列后hover會不停的重新渲染clumns的render內容，對最底層組件的 componentWillReceiveProps（父props更新改變自身的state）不斷被刷新可能導致部分功能失效，由於螞蟻金服沒有暴露這個hover事件，暫無解決辦法。3.<form>組件內給<select>附初值initialValue可以附option的value索引

<Option key={ control ? item.id : item.paramValue} value={ control ? item.id : item.paramValue}></Option>

key和value都要加上（antd官方文檔說只加key就可以呵呵）

坑爹的antd<table>組件！！rowSelection單條點擊onChange函數返回的第二個參數selectedRows有時會丟失，設置單條點擊回點某個點過的選項順序不變！！，只能通過selectedRowKeys去遍歷dataSource獲得某條所有信息！！！

 

4.<form>標簽，用form.setFieldsValue方法要先賦初始值

 const { getFieldDecorator, setFieldsValue } = this.props.form

  for (let key in data) {

   getFieldDecorator(key, { initialValue: undefined  })

 } // 用form.setFieldsValue方法要先賦初始值

 setFieldsValue(data)

 getFieldDecorator方法的要想組件獲取到initialValue的值，必須在最外層，不能<div></div>在包裹：

<FormItem label='測試' colon={false}> // colon設置false標簽后的冒號消失
   {getFieldDecorator('test', {
      initialValue: this.state.test
    })(
      <Input />  // 要想Input組件獲得initialValue值，必須在最外層
    )}
</FormItem>

 validateFields校驗函數第一個參數可傳需要校驗的數組（選填）：

this.props.form.validateFields(['title'], (err, values) => {
      if (err) return
  })  // 只校驗'title'

 

5.<TreeSelect>：

樹形下拉框默認值type為string。

allowClear(清除所有按鈕)在onChange函數里的第三個參數extra的allCheckedNodes屬性會丟失。

 

6.<Table> 有個loading屬性，向后台請求數據時候loading=true,加載好數據后loading=false。

 

7.<Table>列表只可選擇單項：

class membership extends Component {
  constructor(props) {
    super(props)
    this.state = {
        selectedRowKeys: [], // 被選中列表的id
        selectDetails: {}, // 被選中列表的詳細內容
　　　　 dataSource: [], // 列表數據
        pagination: {
          pageSize: 10,
          current: 1,
          total: 0,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50', '100'],
      },
    }
}
// 表格列表點擊
onSelectChange(selectedRowKeys, selectDetails) { // antd此函數第二個參數有問題
const { dataSource } = this.state
const selectedRowKeysChange = selectedRowKeys.splice(selectedRowKeys.length - 1)
const selectDetailsChange = dataSource.filter((item) => (item['id'] === selectedRowKeysChange[0])) // 可遍歷數據列表獲得想要數據條
this.setState({ selectedRowKeys: selectedRowKeys.splice(selectedRowKeys.length - 1), selectDetails: selectDetailsChange
 })

}

render() {
      const rowSelection = {
        selectedRowKeys,
        onChange: this.onSelectChange,
    }
    return <div>
       <Table
      className={style['table-one']}
      dataSource={this.state.dataSource}
      locale={{ emptyText: '暫無數據' }}
      rowKey={record => record.id}
      rowSelection={rowSelection}
      pagination={this.state.pagination}
      bordered columns={columns} loading={loading} />
    </div>
    }
}

css把table所有可勾選按鈕隱藏：

.table {
  margin: 10px 0;
  :global(.ant-table-thead .ant-table-selection-column .ant-checkbox-wrapper) {
    display: none;
  }
}

 

8. antd的DatePicker漢化，項目入口文件(index.js)里設置:

// 時間選擇漢化
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')

時間戳轉化成年月日時分秒：moment(val.gmtCreated).format('YYYY-MM-DD HH:mm:ss')

年月日時分秒轉化成時間戳： time.valueOf()

 

四. 獲取掛載好dom上的html代碼

可在componentDidMout生命周期獲得：

constructor(props) {
    super(props)
    this.test = React.createRef()
}
componentDidMout(){
console.log(this.test)
// 或者：ReactDOM.findDOMNode(this || this.refs.Test) // 傳入this是當前組件的dom
} 
render() { 
return ( <div ref={this.test || 'Test'}> </div> )  // 兩種方式
}

 

五. render渲染中過濾非jsx元素數據：

render {
 const { list = []} = this.state
  return ({
    list.map((item, index)=> {
      if (item.selected) {
          return <div key={ index }>{item}</div>
      }
    }).filter(React.isValidElement)
  })
}

六. 關於前端測試環境模擬后台接口數據mock.js在index.js的引入:

if (process.env.NODE_ENV === 'development') {
  require('Contants/mock') // mock.js所在目錄
}

mock.js:

Mock.mock(`${baseUrl}/industry/material/listMaterial`, (options) => {
  const requestData = JSON.parse(options.body) //解析傳參
  const data = [] // 模擬返回值
  return data
})

注：mock攔截地址一定要完整

七.create-react-app腳手架本地開發中跨域問題：

1.加入proxy配置

start.js文件里使用WebpackDevServer本地啟動了一個服務器，封裝了配置可做代理：

直接在package.json里填寫即可：

"proxy": "目標url"

 或者代理多項：

"proxy": {
    "/gateway": {   // baseUrl = '/gateway' "target": "目標路徑",
      "changeOrigin": true,
      "pathRewrite": {
        "^/gateway": "/"    // 路徑匹配替換'/gateway' ===> '/'
      }
    },
    "/api": {
      "target": "目標路徑",
      "changeOrigin": true,
      "pathRewrite": {
        "^/api": "/"         // 路徑匹配替換'/api' ===> '/'
      }
    }
}