一、我以为的children

   children嘛，child的复数形式，所以顾名思义，某个组件的children（this.props.children/props.children）其实就是这个组件的子组件，表现在代码中，无非就是(如下简易演示demo)

...

在parent组件中获取到的children就是 {Child1，Child2，....Childn}

二、项目需求

实际开发中遇到了一个挺合理的需求，但是前端真的是束手无策，描述如下：

某个页面PageA，在PageA触发跳转到PageB页面，要求如下：

1、pageA——>PageB——>pageA:pageA页面的查询条件需要保存（如果有的话），即就是在pageA以某个条件进行筛选查询后进入PageB再进入pageA，此时pageA应该保存在跳转之前的状态（数据、查询条件）；

2、pageA进入其他页面（即就是通过切换菜单栏切换页面）后再回来不需要保存之前的状态（eg:pageA进入pageC再回到pageA,此时pageA应该恢复初始默认时的状态，即不保存查询条件）

现状：

    项目用的是ant中的pro4脚手架搭建（https://pro.ant.design/index-cn），内部数据使用dva的Redux进行管理，所以所有的查询条件都会被保存到redux中（用户不强制刷新页面的话），导致，无论何种切换（跳）页面，数据（查询条件始终被保存）

解决思路：

   在组件销毁的生命周期（componentWillUnmount）中，清空该页面的所有存在redux中的数据（一般是在项目model层，写一个方法）

遗留问题：

  解决了页面跳转不保存数据（查询条件）的问题，但是用户在某个页面内点击进入到另一个页面再回来的场景（需要保存数据）

解决思路2：

     在组件销毁的生命周期（componentWillUnmount）中，分情况清空该页面的所有存在redux中的数据，本次需求即就是在从页面中点击后跳转再回去

import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Route, Redirect, Switch } from 'dva/router';
import NotFound from '../../Exception/404';
import { getRoutes } from '../../../utils/utils';@connect()
export default class XXXWrap extends PureComponent {componentWillUnmount() {this.props.dispatch({type: 'xx/save',payload: {xxx: {},},});}render() {const { match, routerData } = this.props;return ({getRoutes(match.path, routerData).map(item => ())});}
}

突然有了一点发现：

    这个所谓的入口组件，内容都是Route哎，也就是说入口组件通过Router将其他组件“包”在一起的

这是有疑问：

     这个入口组件的路由怎么配？pro1的配置方法太麻烦了，不想看……

同事也在研究，发现Pro2版本同样的地方（List.js）中放弃了pro1版本的写法，而是直接使用children

路由怎么配，看代码：在路由文件中，搜索/List/List，还真被我找到了

  原来它是把入口文件在路由配置文件中，作为component

   运行代码找到对应页面：

研究了一下发现：

   这根本不是我想要的效果呀，虽然它还是多出了一个页面来将子页面整合到一起……

不对！在List中没有啥问题，但是其他页面也没有将List作为父组件，怎么会是List的children？难道，children不仅仅是代码结构上嵌套表现出来的子组件，路由配置中只要某个组件中routes的组件，都是这个组件的children！好像讲得通！

在这种思路的引导下，我整理出新的代码，如下：

import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Dispatch } from 'redux';interface IXXIndexProps {dispatch: Dispatch;
}
@connect()
class XXIndex extends Component {componentWillUnmount(): void {/**销毁redux中数据的逻辑*/}render() {const { children } = this.props;return {children};}
}export default XXIndex ;

在路由文件中配置如下：

{path: '/xx/yy',name: 'll',hideChildrenInMenu: true,component: './xx/XXIndex.tsx',routes: [{path: '/xx/yy',name: 'll',component: './xx/XXAnalysis',},{path: '/xx/pageA',component: './xx/pageA',},{path: '/xx/pageB',component: './xx/pageB',},],},

然后

    问题成功的解决了

感觉废话有点多，但这确实是发现并解决这个问题坎坷的血泪史，真的是柳暗花明又一村呀！

--------------------------------干货整理----------------------------------------------------

需求：

   点击菜单栏跳转，不需要保留页面查询条件；页面内部跳转再回去，需要保留页面查询条件

解决思路：

   ①将需要保留查询条件的相关页面使用一个入口文件“包裹”；②、在路由文件中，将入口文件设置为routes（包含了相关页面路由）同级别的component

你可能不知道的children：

   router配置文件中，在routes中路由对应的文件，自动作为组件的children

eg:

{path: '/a/b',name: 'xx',hideChildrenInMenu: true,component: './a/b/ParenntIndex',routes: [{path: '/l/cc',name: 'l-cc',component: './l/PageA',},{path: '/l/cc/dd',component: './l/cc/PageB',},{path: '/l/cc/ff',component: './l/PageC',},],},

在ParenntIndex获取children，则就是{PageA，PageB，PageC}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！