![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 85
只如初见0706
这个作者很懒,什么都没留下…
展开
-
react-router 4.2.0<link>页面跳转-传参与不传参
react-router 4.2.0<link>页面跳转传参,直接传值和变量传值原创 2017-11-19 21:29:37 · 1720 阅读 · 0 评论 -
深度剖析React中如何实现系统内外的跳转
1、系统内部的跳转效果:单击"跳转"按钮,可以跳转到系统内指定的页面 第一步:定义routerimport Login_Index from '../components/Login_Index.js';//引入页面 <Route path="/Login_Index " component={Login_Index }/> //path:单纯路径 (1)代码实现...原创 2018-03-23 10:53:33 · 2459 阅读 · 0 评论 -
React中通过diaplay实现控件按钮的呈现与隐藏
1、实现效果通过单击编辑图标实现页面中对应按钮的呈现与隐藏、效果图如下2、代码实现import React, { Component } from 'react';import '../../../style_css/antd.css';import { Layout,Icon,Row, Col} from 'antd';class Index extends Component { ...原创 2018-03-16 11:41:01 · 33527 阅读 · 2 评论 -
React中通过Echarts实现磁贴的呈现与跳转效果
1、实现效果内容模块通过磁贴效果进行呈现双击对应磁贴模块,可以实现不同的页面跳转效果具体效果截图如下双击“个人信息”跳转到如下页面2、准备工作:安装Echarts组件库 安装代码如下npm install echarts --save3、父子页面结构:为友好实现本效果,采取父子页面结构,即真正的磁贴效果在子页面完成,由父页面调用进行呈现4、父页面:index.jsimport React, { ...原创 2018-03-16 10:56:05 · 1118 阅读 · 0 评论 -
Ajax网络请求超时处理-timeout
1、相关链接:http://blog.csdn.net/zrcj0706/article/details/786399802、实现效果当网络请求时间超过2秒,则弹出提示框:提示网络不稳定具体效果如下图所示3、代码如下:代码截图具体代码let ajaxTimeOut = $.ajax({ //将网络请求事件赋值给变量ajaxTimeOut url: "/api_v1.1/apiP...原创 2018-02-27 17:44:02 · 38673 阅读 · 1 评论 -
浅析package.json中的devdependencies 和 dependencies
1、dependencies和devDependencies 具体代码如下"name": "webpack-react-express", "version": "0.2.0", "private": true, "dependencies": { "antd": "^2.13.11", "babel-polyfill": "^6.26.0", "base-原创 2018-01-27 09:43:48 · 56960 阅读 · 4 评论 -
React中页面的收缩和展开效果
1、实现效果单击当前页面中指定按钮,实现右侧页面的展开和收缩效果具体效果如下2、左右采用栅格化布局:不了解的小伙伴请参考:https://ant.design/components/grid-cn/3、左右页面栅格化占比通过状态机state实现,初始化设置:左侧页面的栅格化占比为24,右侧页面为0(即达到左侧页面全屏,右侧页面不显示的效果),代码如下 //状态机设置constructor() {...原创 2018-01-15 10:44:37 · 17382 阅读 · 1 评论 -
React中Ajax异步解决小技巧
1.设置 setTimeout定时器,通过延迟下一操作的执行时间,来解决ajax网络请求和下一操作异步的冲突(注意:时长的设置要大于等于网络请求的执行时间),代码如下// 定义状态机 constructor(props, context) { super(props, context); this.state = { conten原创 2017-11-26 21:18:56 · 8021 阅读 · 0 评论 -
React基于FromData+Ajax的表单提交
1.定义表单内容,代码如下 //通过该id="userForm" ,可定位到该表单 //用户名 必须定义name,后台要通过name解析该表单的具体内容 //用户年龄 //上传个人信息文件原创 2017-11-26 20:35:28 · 5657 阅读 · 0 评论 -
通过props和state实现React子父组件传参
1.实现效果在index页面(父组件)引入一个子组件,改变index中的状态机state,通过props在子组件响应内容的变化页面操作如下在index页面(父组件)引入一个子组件,改变index中的状态机state,通过props在子组件响应内容的变化页面操作如下单击a按钮 通过props和state实现React子父组件传参 > image2017-11-26原创 2017-11-26 16:56:06 · 6192 阅读 · 0 评论 -
通过componentWillReceiveProps()实现React左右父子页面的联动效果
1.实现效果:通过单击左侧导航栏(父页面)内容,右侧(子页面)内容联动(呈现对应的导航栏内容),具体页面效果如下单击“几何图形初步”,右侧子页面显示“几何图形初步”单击"定义",右侧子页面显示"定义"2.父页面Slider.js:单击具体列表导航栏抛出对应contentInformation redux,(通过react的antd组件库中的Tree组原创 2017-11-26 15:08:15 · 11206 阅读 · 1 评论 -
浅析React生命周期函数的使用
1.constructor():构造函数执行时间:组件被加载前最先调用,并且仅调用一次 作用:定义状态机变量 注意:第一个语句必须是super(props),正确定义状态机代码如下constructor(props) { super(props); this.state = { content:null, } }如果第一句不使用super()...原创 2017-11-22 22:16:04 · 17501 阅读 · 0 评论 -
React中通过tree组件实现不确定层级的折叠菜单效果
1、实现效果折叠菜单的层级可以不相同、可以无限层级,具体根据读取的数据库数据为依据菜单内容读取数据库获得具体效果如下折叠菜单是否可以继续召开取决于前面是否有可召开图标,如下图所示2、实现原理初始化加载页面并未获取全部层级的数据,只是第一层级如果有子层级则呈现可展开图标,可进一步加载呈现下一层级菜单内容,否则没有是否可继续加载呈现下一层级,原理同上3、代码实现分步解析(1)第一步:依赖组件本效果的实...原创 2018-03-20 16:13:02 · 9866 阅读 · 4 评论