-
包裝成路由組件withRouter
-
this.props.location.pathname獲取路由鏈接
-
<Route path = '/' component = {Admin}/>這種模式只是模糊匹配 如果要精準匹配需要 exact = true，如下面寫法<Route path = '/user' exact = {true} component = {Admin}/> -
this.porps.history.replace()跳轉路由鏈接，這種需要在有操作的情況下下跳轉。
類似的有在render中默認跳轉，這是 react-router-dom中的標籤 -
antd中 佈局layout中的defaultSelectedKeys和selectedKeys的區別前者只是默根據第一次指定的key來顯示，之後的通過編碼更新爲其他的值，它則不會改變。
後者是會隨着key更新的。 -
分頁實現技術(2種)
1). 前臺分頁
請求獲取數據: 一次獲取所有數據, 翻頁時不需要再發請求
請求接口:
不需要指定請求參數: 頁碼(pageNum)和每頁數量(pageSize)
響應數據: 所有數據的數組2). 基於後臺的分頁
請求獲取數據: 每次只獲取當前頁的數據, 翻頁時要發請求
請求接口:
需要指定請求參數: 頁碼(pageNum)和每頁數量(pageSize)
響應數據: 當前頁數據的數組 + 總記錄數(total)3). 如何選擇?
基本根據數據多少來選擇 -
修改狀態寫法
{
width: 100,
title: '狀態',
// dataIndex: 'status',
render: (product) => {
const {status, _id} = product
const newStatus = status===1 ? 2 : 1
return (
<span>
<Button
type='primary'
onClick={() => this.updateStatus(_id, newStatus)}
>
{status===1 ? '下架' : '上架'}
</Button>
<span>{status===1 ? '在售' : '已下架'}</span>
</span>
)
}
}
- dangerouslySetInnerHTML用法：作用類似於原生js中的innerHTML
<div dangerouslySetInnerHTML={{__html:'<a>123</a>'}}></div> - 路由跳轉是如果想要攜帶數據
this.props.history.push('path',date)
這個如果在HashRouter中使用的話 在location中是沒有這個屬性的 這個只適用於BrowserRouter
history 對象通常會具有以下屬性和方法：
length - (number 類型) history 堆棧的條目數
action - (string 類型) 當前的操作(PUSH, REPLACE, POP)
location - (object 類型) 當前的位置。location 會具有以下屬性：
pathname - (string 類型) URL 路徑
search - (string 類型) URL 中的查詢字符串
hash - (string 類型) URL 的哈希片段
state - (object 類型) 提供給例如使用 push(path, state) 操作將 location 放入堆棧時的特定 location 狀態。
只在瀏覽器和內存歷史中可用。
push(path, [state]) - (function 類型) 在 history 堆棧添加一個新條目
replace(path, [state]) - (function 類型) 替換在 history 堆棧中的當前條目
go(n) - (function 類型) 將 history 堆棧中的指針調整 n
goBack() - (function 類型) 等同於 go(-1)
goForward() - (function 類型) 等同於 go(1)
block(prompt) - (function 類型) 阻止跳轉。(詳見 history 文檔)。
- 簡介寫法得到bool類型的值
this.isUpdate = !!product._id;
this.isUpdate = product?true:false;
{
title: '創建時間',
dataIndex: 'create_time',
// render: create_time => formateDate(create_time)
render: formateDate
},
//個人對這個寫法的理解，就是相當於把formateDate這個函數賦值給render至於傳的這個參數就是對應的dataIndex的值
render(create_time);
/*function render(create_time){
(create_time) => formateDate(create_time);
formateDate
}
formateDate = () => {};
*/
- 上傳圖片使用的是antd中的upload組件
-
action指定的是訪問的接口
-
name是指攜帶參數的key
-
listType是指圖片的風格
-
fileList已上傳的圖片列表
fileList {
uid: '-1', //唯一標識
name: 'image.png',//文件名
status: 'done',//狀態 uploading done removed error
url: '',//圖片的地址
},
-
onPreview點擊文件鏈接或預覽圖標時的回調
-
onChange={this.handleChange}上傳文件狀態改變是的回調
-
文件上傳中狀態變化的回調函數
-
handleChange = ({ file, fileList }) => this.setState({ fileList });
這裏面的file並不是fileList的最後一項，因此如果在這個時候要操作file的話會出現問題，
可以使用這一行一定要寫在上傳成功後 file = fileList[fileList.length-1] 把這個file強行換爲最後一項。
- 父組件調用子組件方法
使用ref
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}
- 富文本編譯器
yarn add react-draft-wysiwyg draftjs-to-html
- antd Form中重置表單數據 this.form.resetFields();包裝成表單組件
export default Form.create()(Component) - antd 中tree默認展開所有的項 defaultExpandAll，
默認勾選：如果使用這個defaultSelectedKeys，後續顯示其他的選中項會出現問題，因此如果選中項會改變的話徐婭使用這個checkedKeys只是一個默認顯示，如果想要點擊選中的話需要改變爲受控組件，加上onCheck屬性 - antd中 彈出對話框onOk屬性中的this是本身的 。箭頭函數搞定this指向問題