react
人间草木96
这个作者很懒,什么都没留下…
展开
-
react-app中引入UEditor富文本编辑器
react中引入ueditor1.放入静态资源并配置首先把官网下载的Ueditor资源,放入public文件夹中。(你的U盘里有,不用下载了) 2.封装一个组件 UEditor.js ,放到src/pages/components/里/** * @module 百度富文本编辑器 * 自定义菜单配置 */import React, { Component } fr...原创 2019-02-21 13:57:26 · 3240 阅读 · 4 评论 -
react-app类似vue中过滤器filter的写法
方便你复制~~~~ import React, { Component } from 'react'class friend extends Component { constructor(props) { super(props) this.state = { name: '诸葛亮' } } componentWillMount(...原创 2019-02-26 14:22:55 · 3541 阅读 · 2 评论 -
react-app中如何引用本地图片资源
方便你复制~~~import React, { Component } from 'react'// 引入图片 方法1import imgs from '../../images/test.jpg'class wordOfMouth extends Component { render() { return ( <div classN...原创 2019-02-26 15:03:37 · 2218 阅读 · 0 评论 -
react-app生命周期详解学习~~~~~
react生命周期图解~~~*************************************分割线************************************import React, { Component } from 'react'class UserList extends Component { // constructor是ES6对类的默...原创 2019-02-21 11:16:40 · 262 阅读 · 0 评论 -
react脚手架搭建和Ant Design配合使用 "react": "^16.7.0"
*****先要安装node.js,使用npm包管理工具 node.js安装方法如下*****https://blog.csdn.net/shiyaru1314/article/details/54963027https://blog.csdn.net/qq_42564846/article/details/82688266大家都知道国内直接使用 npm 的官方镜像是非常慢的,这里...原创 2019-01-08 12:49:39 · 1776 阅读 · 0 评论 -
react-app中把axios封装成插件(plugs)
首先你要确保react-app环境搭建成功 第一步:npm 安装axios,文件根目录下安装,指令如下npm install axios --save //安装到生产环境第二步: 如何封装插件首先,在react项目的 src/ 文件夹下新建一个文件夹为 plugs,然后在 plugs/ 下新建 axios.js文件,写入如下代码 import axios ...原创 2019-02-21 12:58:49 · 1342 阅读 · 0 评论 -
react-app中引入moment
首先你要确保react环境搭建成功 第一步:npm 安装moment ,文件根目录下安装,指令如下npm install moment -save //安装到生产环境 第二步:在src/index.js 中引入 moment 插件方便你复制~~~import moment from 'moment'React.Component.prototyp...原创 2019-02-21 13:07:09 · 4361 阅读 · 3 评论 -
react-app父组件给子组件传值(通过props)
效果图:父组件import React, { Component } from 'react'// 引用子组件 声明的名字 必须大写import MyInfo from './myInfo'class my extends Component { constructor(props) { super(props) // console.log(props)...原创 2019-02-27 11:51:57 · 1006 阅读 · 0 评论 -
react-app子组件给父组件传值(通过event 事件)
效果图:子组件import React, { Component } from 'react'class myInfo extends Component { constructor(props) { super(props) this.state = {} } componentWillMount() { this.props.toChil...原创 2019-02-27 12:01:08 · 1778 阅读 · 0 评论 -
react-app中md5加密和使用
首先你要确保react-app环境搭建成功第一步:npm 安装js-md5,文件根目录下安装,指令如下npm install --save js-md5 //安装到生产环境第二步:引入 js-md5在项目入口文件 index.js 里 引入 js-md5import md5 from 'js-md5'挂载到react的原型上React.Componen...原创 2019-02-26 12:10:31 · 11138 阅读 · 0 评论 -
react-app 路由跳转学习
1、Link标签跳转在组件标签内使用Link跳转,相应于超链接a标签,使用方式如下:<Link to="/login">登录</Link> 2、编程式导航-JS代码内部跳转实际项目中,很多时候都是通过在JS代码内部进行导航的跳转,使用方式如下:this.props.history.push(`/admin`)3、其他常用方法// 后退...原创 2019-02-22 19:10:43 · 633 阅读 · 0 评论 -
react-app路由 react-router-dom 引入和配置
首先你要确保react-app环境搭建成功 第一步:因为 react-app 默认没有安装react路由,所以要安装安装 react-router-dom 依赖,npm install react-router-dom --save第二步:在src/pages/ 下新建两个组件 a.js 和 b.js写入如下代码:a.js 文件import React,...原创 2019-02-22 18:48:57 · 2627 阅读 · 2 评论 -
react-app中引入loading加载动画,刷新页面出现动画
1. 在 public/css 文件里 新建 loading.min.css 文件 写入如下代码:#i-loading{background:#fff;left:0;top:0;right:0;bottom:0;position:fixed;z-index:9999;transition:all .5s ease-out}.i-loading-out{opacity:0;}#i-loadi...原创 2019-02-21 14:36:31 · 3704 阅读 · 1 评论 -
react-app中引入 数据RSA加密
1. 在 public/js 文件里 新建 jsencrypt.min.js 文件 写入如下代码:(function(){function BigInteger(a,b,c){null!=a&&("number"==typeof a?this.fromNumber(a,b,c):null==b&&"string"!=typeof a?this.fromStr...原创 2019-02-21 14:44:53 · 1960 阅读 · 0 评论 -
基于react-app配置移动端自适应—淘宝弹性布局方案lib-flexible和postcss-px2rem实践(750px设计稿)
首先你要确保react-app环境搭建成功第一步:安装 lib-flexible,postcss-px2rem npm i lib-flexible --savenpm i postcss-px2rem --save 第二步:引入 lib-flexible在项目入口文件 index.js 里 引入 lib-flexibleimport 'lib-flexib...原创 2019-02-21 21:23:39 · 8325 阅读 · 2 评论 -
react-app中引入sass
首先你要确保react-app环境搭建成功 第一步:安装sass依赖,npm install node-sass sass-loader --save-dev //安装到开发环境 第二步:安装配置成功!!直接在需要的地方使用即可比如,新建一个 App.sass 文件 写法如下.login width: 200px height: 75px ...原创 2019-02-21 21:59:47 · 615 阅读 · 0 评论 -
react-app中引入antd-mobile(蚂蚁框架手机版) ——全部引入
首先你要确保react-app环境搭建成功 第一步:安装antd-mobile依赖,npm install antd-mobile --save 第二步:在组件中使用import { Button } from 'antd-mobile' <Button type="primary">primary</Button>...原创 2019-02-22 10:57:38 · 2625 阅读 · 0 评论 -
react-app中引入antd-mobile(蚂蚁框架手机版) ——按需加载~~强烈推荐使用。
首先你要确保react-app环境搭建成功 第一步:安装antd-mobile依赖,npm install antd-mobile --save 第二步:在组件中使用import { Button } from 'antd-mobile' <Button type="primary">primary</Button>...原创 2019-02-22 11:04:06 · 4482 阅读 · 0 评论 -
react-app中引入antd(蚂蚁框架) ——全部引入
首先你要确保react-app环境搭建成功 第一步:安装antd依赖,npm install antd --save 第二步:在组件中使用import { Button } from 'antd' <Button type="primary">Button</Button>在组件对应的sass文件中引入 an...原创 2019-02-22 11:15:54 · 2020 阅读 · 0 评论 -
react-app中引入antd(蚂蚁框架) ——按需加载~~强烈推荐使用。
首先你要确保react-app环境搭建成功 第一步:安装antd依赖,npm install antd --save 第二步:在组件中使用import { Button } from 'antd' <Button type="primary">Button</Button>第三步:安装 babel-p...原创 2019-02-22 11:28:37 · 1387 阅读 · 2 评论 -
react-app中通过proxy解决跨域问题
proxy代理原理是把本地http://localhost:3000端口的/api请求转发到了代理服务器 比如http://172.20.1.148:8082proxy代理 匹配 '/api' 的urlcreate-react-app 的版本高于 2.0 版本的时候在 package.json 只能配置 string 类型, 配置成如下:"proxy"...原创 2019-03-06 15:36:18 · 3622 阅读 · 1 评论