文章目录
发现问题解决问题发现问题
同一个组件根据Ant Pro路由传递进来的user和menu两个参数实现不同页面的渲染效果,测试发现页面在第一次渲染时没有问题,改变参数重新渲染则不刷新,如下所示:
/users/admin/menus/chargingPile
渲染充电桩页面成功
/users/admin/menus/airCondition
渲染空调页面失败
最终发现应该使用React生命周期函数componentWillReceiveProps来实现这个功能,
componentWillReceiveProps在初始化render的时候不会执行,它会在Component接受到新的状态(Props)时被触发,一般用于父组件状态更新时子组件的重新渲染,生命周期函数图下:
解决问题
在componentWillReceiveProps中比较前次props和本次props差异,如果有差异则重新获取数值并改变state,通过state的更新渲染页面,相关代码如下:
菜单文件router.config.js
{path: '/consumption/svg/users/:user/menus/:menu',icon: 'project',component: './Aardvark/Consumption/SvgPage',},{path: '/consumption/svg/users/admin/menus/chargingPile',name: '充电桩',icon: 'project',component: './Aardvark/Consumption/SvgPage',},{path: '/consumption/svg/users/admin/menus/airCondition',name: '空调',icon: 'project',component: './Aardvark/Consumption/SvgPage',},
组件文件
componentDidMount() {const {match: {params: {menu, user },},} = this.props; // 获取Ant Pro路由传递的参数this.menu = menu; this.user = user;getSvgPath(this.user, this.menu).then(data => {this.setState({path: data,});});}componentWillReceiveProps(nextProps) {const {match: {params: {menu, user },},} = this.props;// 比较本次路由传递的参数和下次路由传递的参数值是否一致// 不一致重新获取数据更改state实现页面刷新if (menu !== nextProps.match.params.menu || user !== nextProps.match.params.user) {this.menu = nextProps.match.params.menu;this.user = nextProps.match.params.user;getSvgPath(this.user, this.menu).then(data => {this.setState({path: data,});});}}
参考文章React 关于Antd Pro 路由参数改变 页面没有重新渲染刷新