![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
皮的狠
这个作者很懒,什么都没留下…
展开
-
React-错误边界
React-错误边界错误边界是用于捕获其子组件树 JavaScript 异常,记录错误并展示一个回退的 UI 的 React 组件,而不是整个组件树的异常。错误边界在渲染期间、生命周期方法内、以及整个组件树构造函数内捕获错误.注意: 错误边界无法捕获以下几个错误。(1).事件处理(2).错误边界组件自身的错误(3).异步代码(setTimeout 或 requestAnimati...原创 2020-01-02 15:24:57 · 352 阅读 · 0 评论 -
React 路由传参(js)
React 路由传参(js)1.字符串拼接传参this.props.history.push({pathname:`/xxx/${id}`});优点:浏览器刷新,依然能获取到参数缺点:只能传递 字符串类型的参数获取参数:this.props.match.params //这个对象包含了所有拼接传入的参数2.query 对象传参this.props.history...原创 2019-03-20 11:49:57 · 486 阅读 · 2 评论 -
使用redux-actions库编写redux
使用redux-actions框架编写redux1.因为需要使用到@装饰器,所以需要在babel内添加配置。首先,先执行如下指令npm run eject执行该指令会生成config文件夹以及在package.json文件内生成一些配置项在package.json文件内找到 babel项(一般在最后)添加上图所示的 plugins项即可。2.开始使用redux-actio...原创 2019-02-12 17:44:34 · 477 阅读 · 2 评论 -
React 使用 Redirect 进行重定向时浏览器报错问题
React 使用 Redirect 进行重定向时浏览器报错问题1.我们在项目中有非常多的地方需要使用路由的重定向,这个时候就要使用到 Redirect组件进行路由重定向。但是使用的时候会发现,浏览器会报错:: You tried to redirect to the same route you’re currently on: “/home” 类似这样的错误。但是还是能达到效果,就是会有一个报...原创 2019-01-24 14:44:53 · 4917 阅读 · 0 评论 -
React-Redux过程解析
React-Redux过程解析1.react项目中,使用到redux的地方,也是跟vue中使用vuex一样,一般是用于管理 多个地方都可以对其改变,或者受其影响的state(状态)。2.在redux的组成:(1).stroe : 仓库存储管理state,只能有一个。(2).state:状态值(3).action: 状态请求触发的媒介,是一个对象,必须有type属性,用于匹配action...原创 2018-12-16 15:15:15 · 159 阅读 · 0 评论 -
React框架中使用Echarts
React框架中怎么使用Echarts插件1.要使用该插件肯定要先下载该插件:npm install echarts --save2.下载完之后就可以项目中使用了,但是在React框架中使用,必须还要下载一个echarts-for-react 库:npm install echarts-for-react --save3.下载完上述两个插件之后就可以在React项目中使用...原创 2018-12-09 16:34:35 · 819 阅读 · 6 评论 -
React-route-exact属性
React-Route-exact属性1.一般情况下react中Route匹配会匹配所有path中含有匹配条件(to属性值)的路由。此处匹配条件一般指的是Link标签中的to属性或Redirect标签中的to属性值。如下情况:<Route path='/' component={Home} /><Route path='/index' component={Index}...原创 2018-12-09 10:44:12 · 933 阅读 · 0 评论 -
react-脚手架搭建项目
react-脚手架搭建项目1.先利用npm包管理器,下载react脚手架:npm install create-react-app -g2.利用react脚手架创建项目:create-react-app &lt;项目名称&gt;3.进入项目目录:cd &lt;项目名称&gt;4.运行项目:npm start搭建项目完成!...原创 2018-12-03 19:36:26 · 162 阅读 · 0 评论 -
react-父子组件传值-子传父
React-父子组件传值-子传父1.直接上代码: class Children extends React.Component { constructor(props){ super(props); this.state={ msg:'我是子组件', pmsg:this.props.pmsg } } send()...原创 2018-12-03 18:19:07 · 437 阅读 · 0 评论 -
React-router-dom路由的使用
React-router-dom的入门使用1.项目引入react-router-dom安装:npm install react-router-dom --save引入:import { BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom...原创 2018-12-05 17:57:22 · 839 阅读 · 0 评论 -
Ant Design UI框架的使用
Ant Design UI框架的使用1.下载ant design 蚂蚁金服UI框架:npm install antd --save2.使用:在需要使用该UI框架的地方,需要手动引入样式。 import 'antd/dist/antd.css';需要使用哪些模块的UI直接引入即可:import {Button, Icon,Radio} from 'antd'用逗号隔开每个...原创 2018-12-05 16:37:04 · 2543 阅读 · 0 评论 -
React-父子组件传值
react-父子组件传值-父传子1.父组件往子组件内传值,只需要通过子组件自定义属性的方式传入即可,在子组件中,直接使用this.props.属性名访问(ES6class形式的组件,function类的组件直接取参数props.属性名即可);‘ class Children extends React.Component { constructor(props){ sup...原创 2018-12-03 14:40:58 · 175 阅读 · 0 评论 -
React-脚手架配置scss
React-脚手架中使用scss的前提配置1.创建脚手架之后,打开package.json文件,找到如下项。划红线的区域的指令就是生成相关配置文件的命令;在git中npm run eject运行之后会生成一个config文件夹,文件夹内就是一些配置文件。根据里面的信息可以知道,需要安装node-scss 和scss-loadernpm install node-scss ...原创 2018-12-07 20:42:53 · 1061 阅读 · 0 评论 -
React-事件的函数绑定
React-事件的函数绑定1.React内的事件名,均使用驼峰式写法:(1). onClick(2).onKeyDown(3).onMouseOver…2.绑定函数的方法(1).第一种(不常用)class MyFirst extends React.Component { /*构造器*/ constructor(props){ super(props);/...原创 2018-12-01 21:35:45 · 191 阅读 · 0 评论 -
React-state(状态值)
React-state(状态值)1.作用:用于存储组件内的数据,是组件的私有属性,不可以通过外部访问和修改,只能在组件内部修改,state内的值修改会触发DOM重新渲染props2.在组件中的写法:class MyFirst extends React.Component { /*构造器*/ constructor(props){ super(props);//调用...原创 2018-12-01 21:24:10 · 659 阅读 · 0 评论 -
React-props.children属性
props.children使用1.代码如下: class MyFirst extends React.Component { render(){ return ( <div> { this.props.children } </div> ) } } ...原创 2018-12-01 20:53:52 · 715 阅读 · 0 评论 -
ref属性的使用
ref属性的使用1.在react,Vue中均可以使用ref属性来操作DOM在Vue中的使用:html <p ref='p'>我是测试段落2</p> <input type="text" ref="input"/> <button @click="foucs">click me 输入框获得焦点</原创 2018-12-02 15:57:25 · 6655 阅读 · 0 评论 -
React-数据双向绑定
React-数据双向绑定1.react中数据的双向绑定没有vue中那么方便,需要自己写。方法如下:组件中的构造函数constructor(){ super(); this.state={ msg:'Hellow World', num:1, }};组件中的方法changeMsg2(e){ this.setState({ msg:e.target.value})...原创 2018-12-02 14:50:41 · 458 阅读 · 0 评论 -
React-生命周期
React-生命周期1.react-生命周期可以分为3大块:(1).初试化:componentWillMount()实例创建完成,且state,props均初始化完成,可以进行访问。componentDidMount()实例挂载渲染完成。注释:初始化方法组件创建后均只会执行一次(2).更新:componentWillReceiveProps(nextProps)当组件接收...原创 2018-12-02 14:06:44 · 156 阅读 · 0 评论