通过componentWillReceiveProps()实现React左右父子页面的联动效果

最新推荐文章于 2024-08-02 14:22:18 发布

置顶

只如初见0706

最新推荐文章于 2024-08-02 14:22:18 发布

阅读量1.1w

点赞数 3

分类专栏： react 文章标签： componentWillReceive 父子页面联动 react联动效果导航

本文链接：https://blog.csdn.net/zrcj0706/article/details/78637353

版权

本文介绍了如何在React中利用componentWillReceiveProps()方法实现父子页面的联动效果。通过单击父页面的antd Tree组件导航栏，传递contentInformation到redux，子页面Detail.js首次加载时在componentDidMount中接收，后续更新则在componentWillReceiveProps(nextProps)中处理。同时，文章提到了使用react-router 4.2.0设置路由关系和redux进行状态管理的细节。

摘要由CSDN通过智能技术生成

1.实现效果：

通过单击左侧导航栏（父页面）内容，右侧（子页面）内容联动（呈现对应的导航栏内容），具体页面效果如下
单击“几何图形初步”，右侧子页面显示“几何图形初步”

单击"定义"，右侧子页面显示"定义"

2.父页面Slider.js：单击具体列表导航栏抛出对应contentInformation redux，(通过react的antd组件库中的Tree组件实现列表导航栏效果)，代码如下

需要通过import { Tree } from 'antd'引入使用;
定义：const TreeNode = Tree.TreeNode;

import React, { Component } from 'react';
import { Router, Route, hashHistory, IndexRoute, Redirect, IndexLink } from 'react-router';
import { Link, HashRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import 'antd/dist/antd.css';  // Add
import { Layout, Menu, Breadcrumb, Icon, Tree, Button, Radio, Row, Col, Modal } fr