![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 75
神奇大叔
这个作者很懒,什么都没留下…
展开
-
受控组件、非受控组件
受控组件:将React里的state属性和表单元素的值建立依赖关系,再通过onChange事件与setState()结合更新state属性,就能达到控制用户输入过程中表单发生的操作。被React以这种方式控制取值的表单输入元素就叫做受控组件。class TestComponent extends React.Component { constructor (props) { super(props); this.state = { username: "lindaid原创 2021-12-21 16:47:58 · 161 阅读 · 0 评论 -
react 通过react的方式添加和卸载节点
import ReactDom from 'react-dom'添加节点: ReactDom.render(ReactNode,挂载的dom对象) 将内容添加到dom对象内 卸载节点: let state=ReactDom.unmountComponentAtNode(挂载的dom对象) 返回是否删除成功bool值 删除dom对象内的内容代码示例: const div = document.createElement('div'); document.body.appe原创 2020-12-21 15:52:25 · 4865 阅读 · 0 评论 -
react 环境变量
1、在项目根目录与src同级创建.env文件2、环境变量 (1)自定义环境变量 1、可以在其他文件访问的自定义环境变量必须以REACT_APP开团 REACT_APP_xxx=x x就是字符串,不需要添加引号 2、可以设置其他任意自定义变量,只能在本文件访问,不区分大小写 (2)使用其他环境变量 REACT_APP_xxx=$xx 必须使用$,否则会认为是字符串 (3)在tsx/js文件中使用 {process.env.REACT_APP_NAME}原创 2020-07-24 17:23:38 · 2350 阅读 · 0 评论 -
react 组件卸载前需要清除的方法
在componentWillUnmount中处理 1、定时器 clearTimeout/clearInterval 2、如监听滚动条的dom事件 window.onScroll=null; 3、网络请求 当网速较慢时,发起网络请求还未接收到就跳转到其他页面 原因是当离开页面以后,组件已经被卸载,执行setState时无法找到渲染组件。 这里通过离开页面时重写setState方法且不返回任何数据来解决,使得组件中的setState方法无效 this.setState原创 2020-07-15 10:07:48 · 3532 阅读 · 0 评论 -
dangerouslySetInnerHTML识别文本标签
和innerHTML效果一样,能够识别文本中的标签用法:<p dangerouslySetInnerHTML={ __html: xxx } />原创 2020-07-14 15:14:17 · 796 阅读 · 0 评论 -
react 轮播图
1、安装 cnpm install --save react-swipeable-views 2、引入 import SwipeableViews from 'react-swipeable-views'; import { autoPlay } from 'react-swipeable-views-utils'; const AutoPlaySwipeableViews = autoPlay(SwipeableViews);3、使用 <AutoPlaySwipeableV原创 2020-07-10 16:45:32 · 741 阅读 · 1 评论 -
react 配置环境变量
1、安装 cnpm install -D env-cmd 2、和src同级新建.env-cmdrc文件 { "dev":{ "PORT":"端口号", 启动端口 "REACT_APP_API_URL":"/xx" 公共api } } 3、修改package.json的"script": "start": "env-cmd -e dev xxx",代码示例:{ "dev":{ "PORT":"5050", "REAC原创 2020-07-07 15:16:58 · 1704 阅读 · 1 评论 -
react 报错You should not use xx outside a 「Router」
不能将使用了react-router-dom的组件暴露在BrowserRouter之外解决:将组件放在BrowserRouter内代码示例:import React,{Component} from 'react'import Header from './common/header'import {CreateGlobalStyle} from './style.js';import {Icon} from './statics/iconfont/iconfont'import {Bro原创 2020-07-02 10:10:38 · 1475 阅读 · 0 评论 -
react 自定义json数据模拟后台
1、在public目录下创建json文件 如:public/api/data.json 2、在json文件中自定义数据3、当请求url为'api/data.json'时,会自动去到public目录下查询,并返回json内容代码示例:import {SEARCH_BLUR,SEARCH_FOCUS} from './action-type'import axios from 'axios'export const searchFocus=()=>({type:SEARCH_FOC原创 2020-06-30 11:32:57 · 902 阅读 · 0 评论 -
react 使用mock.js模拟后台数据
1、cnpm install mockjs -S2、在index.js引入mock.js文件 判断是否是生产环境 if(process.env.NODE_ENV=='development') { require("mock.js文件所在路径"); } 3、创建js文件 (1)引入 var Mock = require('mockjs') (2)设置数据返回时间 Mock.setup({ timeout:毫秒, }) (3)设置返回数据:原创 2020-06-30 11:18:59 · 1068 阅读 · 0 评论 -
react styled-components插件完成独立组件css样式(js重构css写法)
1、安装 cnpm install styled-components --save 2、创建js文件,写全局样式 import {createGlobalStyle} from 'styled-components' export const x= createGlobalStyle ` 全局css样式 `3、在主入口文件中(App.js) import {x} from './xx.js' 在标签所在任意位置放上即可 <x />4、一般标签样式(如div)原创 2020-06-29 17:10:59 · 1031 阅读 · 1 评论 -
react react-transition-group动画插件
设置一组动画 1、安装 cnpm install react-transition-group --save 2、引入 import { CSSTransition } from 'react-transition-group'; 3、使用 <CSSTransition in={show} 动画触发布尔值 timeout={n} 动画时间n毫秒 classNames='xx' 设置出现隐藏动画的类名原创 2020-06-28 22:37:22 · 280 阅读 · 0 评论 -
react 内置富文本编辑器
1、下载 cnpm install braft-editor --save 2、引入 引入编辑器组件 import BraftEditor from 'braft-editor' 引入编辑器样式 import 'braft-editor/dist/index.css'3、使用 <BraftEditor value={初始值xx} onChange={改变内容回调} onSave={保存时回调} />4、设置初原创 2020-06-27 15:21:52 · 2234 阅读 · 0 评论 -
react antv实现图片上传预览
1、引入 import {Upload} from 'antd' 全局引入样式:import 'antd/dist/antd.css' 2、使用 <Upload name="上传名称,和后台约定" listType="picture-card" className="样式类" showUploadList={false} action="后台地址" onChange=原创 2020-06-27 11:17:54 · 1152 阅读 · 0 评论 -
react 路由render属性
作用: 能够更方便地给组件传递额外的属性 <Route path={xx} render={props=>{ return <组件 {...props}></组件> </Route> 因为渲染的组件不是路由组件,所以需要传入props代码示例:import React from 'react';import './App.css';import {Switch,Route,Redirect} from 'reac原创 2020-06-25 11:05:05 · 1747 阅读 · 2 评论 -
react 版本升级
cnpm install --save react@16.13.1 react-dom@16.13.1原创 2020-06-23 15:12:37 · 2146 阅读 · 0 评论 -
react Ant Motion设置动画
1、安装 cnpm install rc-queue-anim --save 2、引入 import QueueAnim from 'rc-queue-anim'; 3、使用: <QueueAnim delay={300} className="queue-simple"> <div key="a">Queue Demo</div> <div key="b">Queue Demo</div> <div原创 2020-06-16 21:48:35 · 1933 阅读 · 1 评论 -
react 在非路由组件中使用路由组件的api
如使用:this.props.history、this.props.location、this.props.match等1、引入 import {withRouter} from 'react-router-dom' 2、将export default类取消,改写成在最后 export default withRouter(类名);代码示例:import React,{Component} from 'react'import {TabBar} from 'antd-mobile'i原创 2020-06-14 10:27:14 · 674 阅读 · 0 评论 -
react 配置代理服务器解决跨域
1、在package.json中添加 "proxy":"http://127.0.0.1:4000" 2、请求url时 axios.get('/路由名')即可原创 2020-06-11 14:53:07 · 665 阅读 · 0 评论 -
react 使得单个页面的高度为100%
1、在index.css设置html、body、#root的高度为100%2、在组件中设置最外层高度为100%原创 2020-06-09 10:07:20 · 2481 阅读 · 0 评论 -
react 引入本地图片
react中src直接写本地路径图片不会显示1、require src={require('本地图片路径')} 2、import import img from '本地图片路径' src={img}原创 2020-06-09 09:38:09 · 644 阅读 · 0 评论 -
react 配置less
1、下载 cnpm install --save less less-loader 2、在node-modules/react-scripts/config/webpack.config.js中 (1)大概61行后,sass匹配后面放置less const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/; (2)在大概539行,sass配置文件后配置less { test: le原创 2020-06-08 17:13:20 · 451 阅读 · 0 评论 -
react 移动端使用antd mobile ui库
1、安装 cnpm install antd-mobile --save cnpm install babel-plugin-import --save-dev cnpm install react-app-rewired customize-cra --save-dev 2、设置按需加载和按需打包 (1)在项目根目录创建(与src同级),config-overrides.js文件 const { override, fixBabelImports } = require('custom原创 2020-06-08 16:48:13 · 1294 阅读 · 0 评论 -
react 打包发布
原创 2020-06-08 15:42:36 · 221 阅读 · 0 评论 -
react 发布订阅插件pubsub-解决组件间传递数据
解决组件间数据传递(兄弟、子父和多层都可以使用)当触发发布,就会触发订阅1、安装npm install pubsub-js2、发布消息: import PubSub from 'pubsub-js'; PubSub.publish('发布名称',数据);3、订阅消息: import PubSub from 'pubsub-js'; PubSub.subscribe('订阅发布的名称',function(msg,searchName){ msg:订阅的名称 sear原创 2020-06-06 10:57:09 · 780 阅读 · 0 评论 -
react map遍历返回对象写法
xx.map(item=>({键值对}))原创 2020-06-06 10:09:02 · 2428 阅读 · 0 评论 -
react 数据监听
监听组件传递的值: componentWillReceiveProps(newProps) { 参数为给组件传递的参数 } 监听组件内部状态的变化:componentDidUpdate(prevProps,prevState){ 参数分别为改变之前的数据状态对象 if(prevState.属性名!=this.state.属性名) { ... }}代码示例: //组件接收新属性时调用 componentWillReceiveProps(newProps)原创 2020-06-06 10:05:54 · 18286 阅读 · 0 评论 -
react 脚手架环境ui库antd搭建、配置less
针对react脚手架环境设计的ui库 1、安装 cnpm install -S antd 2、修改成按需加载 (1)安装依赖 cnpm -D install react-app-rewired customize-cra (2)修改package.json中的scripts 将原本对应内容替换成如下内容 "start": "react-app-rewire...原创 2020-02-13 22:38:28 · 437 阅读 · 0 评论 -
react react-router v6版本
npm install react-router-dom@61、基本使用 import {BrowserRouter,Routes,Route} from "react-router-dom" Routes:代替<Switch> ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById("root") );原创 2022-02-20 16:46:31 · 703 阅读 · 0 评论 -
react 路由完整版
import {BrowserRouter} from 'react-router-dom'1、用BrowserRouter管理整个应用 在index.js中,将<App />用<BrowserRouter>包裹起来2、路由跳转 import {NavLink,Link} from 'react-router-dom' NavLink和Link都可以实现,且用法相同 <NavLink to='/about'>About</NavLink&g原创 2020-06-06 16:54:00 · 2606 阅读 · 0 评论 -
react 路由4.x
1、安装 cnpm install -S react-router@4.3.1 react-router-dom@4.3.12、引入 import {BrowserRouter as Router,Link,Route} from 'react-router-dom' 可以使用as xx重命名BrowserRouter3、BrowserRouter可以有多个,但其中的路由只能是一个或...原创 2020-02-24 22:26:27 · 190 阅读 · 0 评论 -
react 路由嵌套4.x版本
路由4版本 传递参数 和路由3版本一样 (1)路由path中添加/:键名 (2)Link中添加{es反引号方式/字符串拼接}传递变量值 (3)组件中{this.props.match.params.键名} 路由嵌套和版本3一样 不同:嵌套的父组件要写成<组件名 path='xx'></组件名>的形式 且无IndexRoute...原创 2020-02-13 21:36:33 · 149 阅读 · 0 评论 -
react 路由基础实现4.x版本(404处理)
路由4版本 1、安装 cnpm install -S react-router@4.3.1 react-router-dom@4.3.1 2、在路由主入口文件引入 import React,{Component} from 'react' import {Route,BrowserRouter,Swicth} from 'react-router-dom' 其中: ...原创 2020-02-13 18:18:23 · 321 阅读 · 0 评论 -
react 3.x路由携带参数
路由跳转写待参数 1、在主入口的路由路径中,末尾添加/:键名 若传递多个参数 以/:xx/:xx的形式添加 2、在跳转的Link标签对应的路径中,末尾添加/键值 其中若传递的值是变量: 两种写法: 1、路径为:{'xx/'+变量} 内部为引号 2、路径为:{`x/${变量}`} 以es6写法,发反引号和${} 加大括号是因为解析j...原创 2020-02-13 15:39:23 · 627 阅读 · 0 评论 -
react 路由嵌套3.x版本
路由嵌套 在一个路由中加载多个子路由 1、在主入口路由文件引入子路由 2、将子路由放入对应的父路由内,且子路由名称是在父路由名字基础上追加,否则跳转时会因跳转路径问题报错 <Router xx>> <Router xx></Router> </Router xx> 3、在父路由对应的组件内,添加Link标签设置跳转,别...原创 2020-02-13 14:51:07 · 126 阅读 · 0 评论 -
react 路由基础实现3.x版本
路由 单页面应用 1、安装 cnpm install --save react-router@3.x 2、在主入口文件引入 import {Router,Route,hashHistory,IndexRoute} from "react-router" import xxx from xx //引入路由要加载的组件 其中: 在Router内的Route为路由,h...原创 2020-02-13 11:40:24 · 168 阅读 · 0 评论 -
react 脚手架环境设置代理服务器解决跨域
除了在nodejs里面的路由请求中设置外 res.set('Access-Control-Allow-Origin', '*'); 对于使用creat-react-app构建的项目 1、npm run eject 将当前位置抛出,让我们可以修改配置文件 2、在package.json中添加 "proxy": "proxy":"http://localhost:后台服务器名称...原创 2020-02-12 23:30:52 · 824 阅读 · 0 评论 -
react 处理fetch网络请求
1、通过node.js搭建服务器,且必须有跨域请求2、php搭建的不行,估计是跨域的问题3、在页面渲染后的componentDidMount()生命周期函数中发送请求代码示例:react.js文件import React ,{Component}from 'react';import User from './user'class App extends React.Compon...原创 2020-02-12 21:12:27 · 927 阅读 · 0 评论 -
react Ref操作
ref两种写法 添加ref后,将使用js的方式来操作标签 第一种: (1)在构造函数中声明 this.xx=React.createRef(); (2)在要操作的标签上添加 ref={this.xx} (3)即可配合事件操作该标签 this.xx.cuurent.js操作dom方式; 如:this.xx.current.innerHT...原创 2020-02-12 15:33:06 · 975 阅读 · 0 评论 -
react props传参配置
1、引入库 import xx from 'prop-types'; 2、配置参数信息(不符合只会报警告,不会中断程序) (1)传参类型 组件名.propTypes={ 参数名:xx.数据类型} (2)传参只包含一个参数,且必须传递该参数 组件名.propTypes={参数名:xx.element.isRequired} (3)参数默认值 组件名.de...原创 2020-02-12 11:06:28 · 539 阅读 · 0 评论