【React+Typescript+Antd】页面内局部路由跳转
时间:2022-07-24
本文章向大家介绍【React+Typescript+Antd】页面内局部路由跳转,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一般地,首页需要在全局路由的基础上,增加页面路由功能。
因为首页有导航,有页头、页尾这些固定的布局,而内容板块可以随导航而变动。这时候全局路由已经不能满足页面局部刷新的需求。
假设首页架构页面是一个独立组件,并称为父组件,Content内容由各导航所对应的页面组件按需替换加载。则页面内跳转有如下情况。
1、父组件跳转子组件; 2、子组件跳转兄弟组件;
父组件跳转子组件
这个实现简单,只要在父组件的Content区域,用子组件替换即可。
- 父组件代码:
contentView = () => {
switch (this.state.infoType) {
case 'dashboard':
console.log('Dashboard')
return <MainPage jumpFunc={this.jumpFunc} />
case 'team':
console.log('TeamConfig')
return <TeamConfig />
case 'project':
console.log('ProjectList')
return <ProjectList jumpFunc={this.jumpFunc} />
case 'projectDetail':
console.log('ProjectDetail')
return <ProjectDetail jumpFunc={this.jumpFunc} params={this.state.params} />
case 'codeReview':
console.log('Code Review')
return <CodeReview />
case 'base':
return <MyInfo userid='666' infoType='base' />
case 'sec':
return <MyInfo userid='666' infoType='sec' />
default:
break;
}
return <MyInfo userid='666' infoType='sec' />
}
render() {
return (
<Layout>
<Sider
width='250'
trigger={null}
collapsible
collapsed={this.state.collapsed}>
<div className='naviHeader'>
<img src={logo} className="headerLogo" />
</div>
<Menu
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
theme="dark"
inlineCollapsed={this.state.collapsed}
onSelect={this.tabSelect}
>
<Menu.Item key="dashboard" className='naviCell'>
<Icon type="dashboard" style={{ fontSize: 20 }} />
<span className='naviItemTitle'>Dashboard</span>
</Menu.Item>
<Menu.Item key="project" className='naviCell'>
<Icon type="code" style={{ fontSize: 20 }} />
<span className='naviItemTitle'>Project</span>
</Menu.Item>
<Menu.Item key="codeReview" className='naviCell'>
<Icon type="code" style={{ fontSize: 20 }} />
<span className='naviItemTitle'>Code Review</span>
</Menu.Item>
<Menu.Item key="tool" className='naviCell'>
<Icon type="tool" style={{ fontSize: 20 }} />
<span className='naviItemTitle'>Dev Tools</span>
</Menu.Item>
<Menu.Item key="team" className='naviCell'>
<Icon type="team" style={{ fontSize: 20 }} />
<span className='naviItemTitle'>Team Config</span>
</Menu.Item>
</Menu>
</Sider>
<Layout>
<Header style={{ background: '#fff', padding: 0 }} className='myInfoHeader'>
<Icon
className="trigger"
type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
style={{ paddingLeft: 20 }}
onClick={this.toggle}
/>
<div className='myInfo'>
<Dropdown overlay={this.menu}>
<a className="ant-dropdown-link myInfoEntrance" href="#">
<Icon type="user" />
<div style={{ paddingLeft: 10 }}>朱老板</div>
</a>
</Dropdown>
</div>
</Header>
<Content
style={{
minHeight: 800,
}}
>
{this.contentView()}
</Content>
</Layout>
</Layout>
);
}
父组件是通过Layout布局进行整体架构,Sider控制Content显示的内容。
contentView方法里面通过判断key值进行不同子组件的展示。
兄弟组件直接互相跳转。
父组件跳转子组件容易,那子组件如何跳转到其他子组件呢?
如果通过全局路由,必定会引起页面整体刷新,不利益体验。
如何自定义局部路由?
这就是问题的关键。
其实需要用到状态提升(或者说共用状态)
跳转步骤如下:
- 在父组件中定义跳转方法,并可以传入参数(包括跳转的页面,以及页面所需参数),并将方法绑定到全局状态;
- 子组件中定义跳转方法,并将方法绑定到全局状态;
- 在子组件跳转方法中获取父组件方法并传入需要跳转的兄弟组件参数进行调用;
1、定义父组件跳转方法
class ARLayout extends React.Component {
constructor(props: any) {
super(props)
this.jumpFunc = this.jumpFunc.bind(this);
}
state = {
collapsed: false,
contentView: <MyInfo userid='666' infoType='base' />,
infoType: 'base',
params: '',
};
jumpFunc(type: any, param: any) {
this.setState({
infoType: type,
params: param,
});
}
contentView = () => {
switch (this.state.infoType) {
case 'dashboard':
console.log('Dashboard')
return <MainPage jumpFunc={this.jumpFunc} />
case 'team':
console.log('TeamConfig')
return <TeamConfig />
case 'project':
console.log('ProjectList')
return <ProjectList jumpFunc={this.jumpFunc} />
case 'projectDetail':
console.log('ProjectDetail')
return <ProjectDetail jumpFunc={this.jumpFunc} params={this.state.params} />
case 'codeReview':
console.log('Code Review')
return <CodeReview />
default:
break;
}
return <MyInfo userid='666' infoType='sec' />
}
……
}
关键代码1、需在构造方法里面绑定this,这样就可以在其他页面访问到jumpFunc方法;
constructor(props: any) {
super(props)
this.jumpFunc = this.jumpFunc.bind(this);
}
关键代码2、在跳转代码里刷新参数,刷新之后会重新更新布局。
jumpFunc(type: any, param: any) {
this.setState({
infoType: type,
params: param,
});
}
2、定义跳转的子组件
class ProjectList extends React.Component<any> {
constructor(props: any) {
super(props);
this.showDetail = this.showDetail.bind(this);
}
showDetail(item: any) {
this.props.jumpFunc("projectDetail", item);
console.log("projectName:" + item.projectName);
};
}
关键代码1、在构造方法里给跳转方法绑定this;
关键代码2、在跳转方法里获取父组件的跳转方法,并调用;
关键代码3、因为构造方法入参是any类型,所有类的继承也要加上any(React.Component<any>
);
3、被跳转的子组件,接收跳转参数
import React from "react";
import "./ProjectDetail.css";
import ProjectDetailHeader from "./ProjectDetailHeader";
import ProjectDetailPanelLint from "./ProjectDetailPanelLint";
import { Layout, Row, Col } from "antd";
import ProjectDetailPanelAutoTest from "./ProjectDetailPanelAutoTest";
import ProjectDetailPanelCICD from "./ProjectDetailPanelCICD";
const { Header, Content, Footer, Sider } = Layout;
class ProjectDetail extends React.Component<any> {
render() {
return (
<Layout className="pd-body">
<Header className="pd-header" style={{ background: '#fff', padding: 0, height: 240 }}>
<ProjectDetailHeader jumpFunc={this.props.jumpFunc} params={this.props.params} />
</Header>
<Content style={{ background: 'none', padding: 0, margin: 24 }}>
<div className="pd-content">
<Row>
<Col span="24">
<div className="pd-panel">
<ProjectDetailPanelCICD />
</div>
<div className="pd-panel">
<ProjectDetailPanelLint />
</div>
<div className="pd-panel">
<ProjectDetailPanelAutoTest />
</div>
</Col>
</Row>
</div>
</Content>
</Layout>
);
}
}
export default ProjectDetail;
上面代码接收参数之后又直接透传给了子组件:
<ProjectDetailHeader jumpFunc={this.props.jumpFunc} params={this.props.params} />
子组件也通过同样的方式(this.props.params
)获取参数,然后展示。
以上就是局部跳转的全部内容,欢迎留言交流。
- 这是硅谷狂人马斯克对未来做出的11个大胆预测,人工智能比核武器更危险
- 在腾讯云上使用自建DNS
- Spring 4.0.2 学习笔记(1) - 最基本的注入
- 关于女神SQLite的疑惑(2)
- WordPress纯代码仿无觅相关文章图文模式功能(增强版)
- 人工智能时代已悄然来临……
- 人民日报发布周鸿祎署名文章:迎接“大安全”时代的新威胁
- Mono 3.2 上跑NUnit测试
- 为WordPress 文章中的链接自动添加 nofollow标签
- 腾讯刘炽平:海外用户破7000万 微信带开发者“出海”
- 研究称性别不均衡或导致人工智能持有性别偏见
- ASP.NET 2.0加密Web.config 配置文件
- .Net 跨平台可移植类库正在进行
- 掌握机器学习数学基础之概率统计(三)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- arm(3)| 点亮led灯
- 根据 PID 获取容器所在的 Pod 名称
- Python 爬虫进阶必备 | 关于某服务平台数据解密流程分析
- batch-compute & GPU分布式机器学习
- 数据源管理 | 搜索引擎框架,ElasticSearch集群模式
- PHP的CLI命令行运行模式浅析
- 基于Pytorch构建三值化网络TWN
- 从零学Paddle系列-1 Paddle框架CNN相关API详解
- 智能搜索模型预估框架的建设与实践
- 1,Jupyter NoteBook 常用魔法命令
- 60行代码徒手实现深度神经网络
- 30行代码徒手实现logistic回归
- 8,模型的训练
- 在腾讯云上部署科学计算软件Amber
- 手把手教你搭建一个灰度发布环境