antd + react the project summary (two to be continued)

1. Package assembly to route withRouter
2. this.props.location.pathname obtain routing links
3.

 <Route  path = '/' component = {Admin}/> 

This model is only accurate fuzzy match to match if required exact = true, as in the following wording

<Route  path = '/user' exact = {true} component = {Admin}/> 

4.this.porps.history.replace () jump route link, this need lower trip in the case where an operation.
Similar render has a default jump, which is a label react-router-dom in
5.antd layout and layout of defaultSelectedKeys selectedKeys difference former is first displayed according to the default specified key, then by encoding updates for other values, it will not change.
The latter will be updated with the key.

6. Paging implementation technology (two kinds)
   1) Reception paging
   request the data: once all the data, do not need to send request page
   request interface:
   need not specify request parameters: p (pageNum) and page number (the pageSize)
   response data: an array of all the data

   2) based on the background page
   request for acquiring data: only the data acquired every time this page, the page request to send
   the request interface:
   specify request parameters: p (pageNum) and page number (the pageSize)
   response data: this page + total number of array data records (total)

   3) How to choose?
   Basically be selected according to how much data

 render: ({status,_id}) => {
                    let btnText = '下架';
                    let text = '在售';
                    if (status === 2) {
                        btnText = '上架';
                        text = '已下架';
                    }
                    return (
                        <span>
                            <Button type='primary' onClick = {() =>{this.updateProductsStatus(_id,status)}}>{btnText}</Button><br />
                            <span>{text}</span>
                        </span>
                    )

7.dangerouslySetInnerHTML Usage: act like a native in innerHTML js

 <div dangerouslySetInnerHTML={{__html:'<a>123</a>'}}></div>

8. Jump route is if you want to carry data

this.props.history.push('path',date)

If you use this in HashRouter in the words of the location of this property is not this only applies to BrowserRouter
History objects usually have the following properties and methods:

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 文档)。

9. Introduction written to give the value of type 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 = () => {};
*/

10. upload pictures using the upload component antd

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强行换为最后一项。

11. parent component sub-assembly method call

使用ref
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

12. Rich text editor

yarn add react-draft-wysiwyg draftjs-to-html

Reset the form data this.form.resetFields 13.antd Form (); to form packaging assembly
export default Form.create()(Component)
14.antd expand in default tree all entries defaultExpandAll,
default check: If this defaultSelectedKeys, subsequent to display other selected item appears problem, so if selected items will change if Xu Ya use this checkedKeys just a default display, if you want to change, then click on the selected component is controlled, plus onCheck properties
dialog onOk attribute this 15.antd pop is itself of
16.