qq_41709082的博客

React-错误边界错误边界是用于捕获其子组件树 JavaScript 异常，记录错误并展示一个回退的 UI 的 React 组件，而不是整个组件树的异常。错误边界在渲染期间、生命周期方法内、以及整个组件树构造函数内捕获错误.注意: 错误边界无法捕获以下几个错误。(1).事件处理(2).错误边界组件自身的错误(3).异步代码(setTimeout 或 requestAnimati...

React 路由传参(js)1.字符串拼接传参this.props.history.push({pathname:`/xxx/${id}`});优点：浏览器刷新，依然能获取到参数缺点：只能传递 字符串类型的参数获取参数：this.props.match.params //这个对象包含了所有拼接传入的参数2.query 对象传参this.props.history...

使用redux-actions框架编写redux1.因为需要使用到@装饰器，所以需要在babel内添加配置。首先，先执行如下指令npm run eject执行该指令会生成config文件夹以及在package.json文件内生成一些配置项在package.json文件内找到 babel项（一般在最后）添加上图所示的 plugins项即可。2.开始使用redux-actio...

React 使用 Redirect 进行重定向时浏览器报错问题1.我们在项目中有非常多的地方需要使用路由的重定向，这个时候就要使用到 Redirect组件进行路由重定向。但是使用的时候会发现，浏览器会报错：: You tried to redirect to the same route you’re currently on: “/home” 类似这样的错误。但是还是能达到效果，就是会有一个报...

React-Redux过程解析1.react项目中，使用到redux的地方，也是跟vue中使用vuex一样，一般是用于管理 多个地方都可以对其改变，或者受其影响的state(状态)。2.在redux的组成：(1).stroe : 仓库存储管理state,只能有一个。(2).state：状态值(3).action: 状态请求触发的媒介，是一个对象，必须有type属性，用于匹配action...

React框架中怎么使用Echarts插件1.要使用该插件肯定要先下载该插件：npm install echarts --save2.下载完之后就可以项目中使用了，但是在React框架中使用，必须还要下载一个echarts-for-react 库：npm install echarts-for-react --save3.下载完上述两个插件之后就可以在React项目中使用...

React-Route-exact属性1.一般情况下react中Route匹配会匹配所有path中含有匹配条件(to属性值)的路由。此处匹配条件一般指的是Link标签中的to属性或Redirect标签中的to属性值。如下情况：<Route path='/' component={Home} /><Route path='/index' component={Index}...

react-脚手架搭建项目1.先利用npm包管理器，下载react脚手架：npm install create-react-app -g2.利用react脚手架创建项目：create-react-app <项目名称>3.进入项目目录：cd <项目名称>4.运行项目：npm start搭建项目完成!...

React-父子组件传值-子传父1.直接上代码： class Children extends React.Component { constructor(props){ super(props); this.state={ msg:'我是子组件', pmsg:this.props.pmsg } } send()...

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...

Ant Design UI框架的使用1.下载ant design 蚂蚁金服UI框架：npm install antd --save2.使用：在需要使用该UI框架的地方，需要手动引入样式。 import 'antd/dist/antd.css';需要使用哪些模块的UI直接引入即可：import {Button, Icon,Radio} from 'antd'用逗号隔开每个...

react-父子组件传值-父传子1.父组件往子组件内传值，只需要通过子组件自定义属性的方式传入即可，在子组件中，直接使用this.props.属性名访问(ES6class形式的组件，function类的组件直接取参数props.属性名即可)；‘ class Children extends React.Component { constructor(props){ sup...

React-脚手架中使用scss的前提配置1.创建脚手架之后，打开package.json文件，找到如下项。划红线的区域的指令就是生成相关配置文件的命令；在git中npm run eject运行之后会生成一个config文件夹，文件夹内就是一些配置文件。根据里面的信息可以知道，需要安装node-scss 和scss-loadernpm install node-scss ...

React-事件的函数绑定1.React内的事件名，均使用驼峰式写法：(1). onClick(2).onKeyDown(3).onMouseOver…2.绑定函数的方法(1).第一种(不常用)class MyFirst extends React.Component { /*构造器*/ constructor(props){ super(props);/...

React-state(状态值)1.作用：用于存储组件内的数据，是组件的私有属性，不可以通过外部访问和修改，只能在组件内部修改，state内的值修改会触发DOM重新渲染props2.在组件中的写法：class MyFirst extends React.Component { /*构造器*/ constructor(props){ super(props);//调用...

props.children使用1.代码如下： class MyFirst extends React.Component { render(){ return ( <div> { this.props.children } </div> ) } } ...

ref属性的使用1.在react,Vue中均可以使用ref属性来操作DOM在Vue中的使用：html <p ref='p'>我是测试段落2</p> <input type="text" ref="input"/> <button @click="foucs">click me 输入框获得焦点</

React-数据双向绑定1.react中数据的双向绑定没有vue中那么方便，需要自己写。方法如下：组件中的构造函数constructor(){ super(); this.state={ msg:'Hellow World', num:1, }};组件中的方法changeMsg2(e){ this.setState({ msg:e.target.value})...

React-生命周期1.react-生命周期可以分为3大块：(1).初试化：componentWillMount()实例创建完成，且state,props均初始化完成，可以进行访问。componentDidMount()实例挂载渲染完成。注释：初始化方法组件创建后均只会执行一次(2).更新：componentWillReceiveProps(nextProps)当组件接收...