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

一.

js 控制跳轉頁面:

可用 <linkto=} > | |this.props.match.history.push('url', state) | | <redirectto=>路由元件

import react,  from 'react'import  from 'react-router-dom'class mytest extends components 
}changepage() )
}render() > : ' '} //重定向
this.changepage.bind(this) }>點選改變
直接跳轉　　)
}}

二.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最下方,會跟著頁面滾動！！需要加上getpopupcontainer=屬性

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

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

坑爹的antd元件！！rowselection單條點選onchange函式返回的第二個引數selectedrows有時會丟失，設定單條點選回點某個點過的選項順序不變！！，只能通過selectedrowkeys去遍歷datasource獲得某條所有資訊！！！

4.標籤，用form.setfieldsvalue方法要先賦初始值

const = this.props.form

for (let key in

data) )

} //

用form.setfieldsvalue方法要先賦初始值

setfieldsvalue(data)

getfielddecorator方法的要想元件獲取到initialvalue的值，必須在最外層，不能

在包裹：

false}> // colon設定false標籤後的冒號消失
)( 
// 要想input元件獲得initialvalue值，必須在最外層
)}

validatefields校驗函式第乙個引數可傳需要校驗的陣列（選填）：

this.props.form.validatefields(['title'], (err, values) =>)  
//只校驗'title'

5.：樹形下拉框預設值type為string。

allowclear(清除所有按鈕)在onchange函式裡的第三個引數extra的allcheckednodes屬性會丟失。

6.有個loading屬性，向後台請求資料時候loading=true,載入好資料後loading=false。

7.列表只可選擇單項：

class membership extends component , //
被選中列表的詳細內容
datasource: , // 列表資料
pagination: ,
}}//
**列表點選
onselectchange(selectedrowkeys, selectdetails) = this.state
const selectedrowkeyschange = selectedrowkeys.splice(selectedrowkeys.length - 1)
const selectdetailschange = datasource.filter((item) => (item['id'] === selectedrowkeyschange[0])) // 可遍歷資料列表獲得想要資料條
this.setstate()

}

render() 
return
classname=
datasource=
locale=}
rowkey=
rowselection=
pagination=
bordered columns= loading= />
}}

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

.table }

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) 
componentdidmout() 
render() > 
) //
兩種方式
}

五. render渲染中過濾非jsx元素資料：

render  = this
.state
return(}
}).filter(react.isvalidelement)
})}

六. 關於前端測試環境模擬後台介面資料mock.js在index.js的引入:

if (process.env.node_env === 'development')

mock.js:

mock.mock(`$/industry/material/listmaterial`, (options) => )

七.1.加入proxy配置

start.js檔案裡使用webpackdevserver本地啟動了乙個伺服器，封裝了配置可做**：

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

"proxy": "目標url"

或者**多項：

"
proxy": 
},"/api": 
}}

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

react 更改antd的預設樣式

React修改Antd元件樣式的方法

react中覆蓋antd元件的樣式

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

react 更改antd的預設樣式

React修改Antd元件樣式的方法

react中覆蓋antd元件的樣式

相關推薦