Ant Design of React项目实战(非专业)

一、创建react项目，引入相关依赖包

关键文件夹及文件：

config：全局配置文件夹（config.js）

node_modules：依赖包文件夹

public：公共文件夹（首页index.html：提供一个应用根DOM）

src：项目模块文件夹

        assets： 公用资源（css、img）

        components 非路由组件

        containers：模块容器文件夹

        utils 工具模块(api.js：封装的api工具模块)

index.js： 入口js文件

navs.js：侧边栏配置文件

routes.js：路由配置文件

项目目录结构 public/index.html src/router.js src/nav.js src/index.js

在src/index.js里面把页面渲染到根DOM里面，而渲染的内容从src/containers/Index.js里面生成。

src/containers/Index.js

下面以report为例：React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。而我们上面的代码中就使用了这种模式。

由路由配置文件可知，我们进入首页后，会默认渲染app容器的内容，当我们访问localhost:3000/report时，会去Report容器中调用report方法，即需要在容器中将report方法导出，给外部使用,同样在report方法中 也使用了BasicTale组件及ConfigProvider组件，还使用了国际化汉化组件zhCN。

src/containers/Report.js

BasicTable组件：主要页面渲染，同时还引入了一些ant design系统组件和自定义组件，  TypeList组件：自定义类型下拉组件   TimeList组件：自定义时间范围组件。

组件引入、组件继承、组件导出

在组件类中初始化数据，定义公共方法，渲染数据页面。

初始化及页面渲染

这里主要讲几个关键点：1、子组件向父组件传值    2、setState异步问题    3、树形数据显示   4、数据绑定 监听

1 、父组件写一个监听子组件的方法，方法回调中获取组件的值，在子组件中onChange事件中 调用父级组件的监听方法，父组件使用子组件是，自动监听。

子组件TimeList 父组件监听方法

父组件，通过timeValue监听子组件的getTimeValue 属性，即实现子组件向父组件传值。

监听关联

2、在setState时，由于这个方法是异步执行的，如果马上去获取setState的值，会出现，还是原来的值，这就需要在setState的回调中去使用。

异步执行、回调使用

3、table树形子级，在点击切换子级时，好像并不会自动隐藏另一个子级，所以需要优化下(可能也是我没有找到)。

Table组件

通过分析，我们可以知道展开是在onExpand考验监听到的，并且通过expandedRowKeys的值，控制展开行的，我们只要监听动态的改变这个值，就可以实现展开隐藏的优化了。

子级优化函数

当我们点击触发展开隐藏操作时，会传递两个参数，expanded:展开还是隐藏的状态值，record:当前点击的记录对象，我们首先设置记录的展开的key值的数组为空，当状态为展开时，把当前的key值存到临时数组中，并将当前展开的值赋值给state里面的我们自定义的记录值expandedKey，而我们在table中通过监听这个值得变化，来控制行的展开隐藏，就实现了我们的优化。这个函数还做了个优化，就是当点击的是父级，并且操作时展开时，才会去重新获取子集数据并重新渲染data值(默认获取父级数据时，子级数据都不获取，即children为空数组)。

4、数据监听绑定，就是当我们改变state里面的值时，会相应的改变监听绑定相关值的渲染

即我们代码中 对相应需要监听绑定的值做了定义，当我们改变这个值的时候，数据会根据改变的值重新渲染，而当我们获取数据的时候，也可以重置这些值。

自定义监听值

最终效果

React App