基于antd的react开发（后台管理系统）

时间：2022-08-28 20:17:37

一. 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就可以呵呵）

4.<form>标签，用form.setFieldsValue方法要先赋初始值
 const { getFieldDecorator, setFieldsValue } = this.props.form
  for (let key in data) {
   getFieldDecorator(key, { initialValue: undefined  })
 } // 用form.setFieldsValue方法要先赋初始值
 setFieldsValue(data)

5.<TreeSelect>树形下拉框默认值type为string

四. 获取挂载好dom上的html代码

可在componentDidMout生命周期获得：

componentDidMout(){
console.log(this.refs.Test)
}
render() {
return (
<div ref='Test'> </div>
)
}

五. react-router 歧义：

{
    path: `${urls.INTERNALDETAIL}/:InternalId`,
    exact: true,
    component: InternalDirectory,
    breadcrumbName: '详情',
    parentPath: urls.INTERNALDIRECTORY,
  },
{
    path: `${urls.INTERNALDETAIL}/add`,
    exact: true,
    component: InternalDetail,
    breadcrumbName: '详情',
    parentPath: urls.INTERNALDIRECTORY,
  },

这样写会导致组件InternalDirectory和组件InternalDetail同时显现在一个路由下,react-router会去匹配url。

 
标签：

相关文章