![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React点滴
从零基础开始学习React过程中的一些笔记以及转载的别人的好的文章
chunchun1230
这个作者很懒,什么都没留下…
展开
-
ant-design pro导出表格数据为Excel文件
环境React+Ant Design一.安装插件js-export-excel1.yarn安装-记得以管理员身份执行yarn add js-export-excelnpm安装npm install js-export-excel2.代码示例:页面先引入安装的插件import ExportJsonExcel from 'js-export-excel';导出按钮:return(<div><Button type="primary" onClick={转载 2022-05-17 09:10:06 · 5131 阅读 · 0 评论 -
Mac下全局安装yarn
sudo -snpm install -g yarn react-native-cli转载 2021-03-08 12:33:58 · 5215 阅读 · 0 评论 -
react组件引用less样式失效问题记录
在react项目中使用了less来预处理css,但是在项目中却遇到了引用样式不生效的问题,现记录如下:页面代码:import React, { Component } from 'react'import { connect } from 'react-redux'import './index.less';class PriceProtection extends Component { render() { return ( <div cla转载 2021-01-19 10:16:53 · 5413 阅读 · 0 评论 -
React 点击按钮显示div与隐藏div
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>React 点击按钮显示div与隐藏div</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="htt...转载 2021-01-07 16:14:03 · 1679 阅读 · 1 评论 -
React中key属性的作用及原理解析
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Test`. See https://fb.me/react-warning-keys for more information.相信在react的使用过程中,大家或多或少都会遇到过这样的警告,这个警告是提醒开发者,需要对渲染的组件添加key属性,那么,这个key属性的作用到底是什么呢?我们先转载 2020-12-14 10:35:00 · 322 阅读 · 0 评论 -
dangerouslySetInnerHTML属性
dangerouslySetInnerHTML属性的功能实际上就是显示纯文本内容import React from 'react';class SetHtml extends React.Component { constructor(){ super(); this.state = { content:'<h1>标题名称</h1>' } } render() { return ( <div&g转载 2020-10-27 14:12:28 · 645 阅读 · 0 评论 -
动态修改JS对象的值及React setState
一、在JS里使用(非ES6)实现场景: 给一个空对象填充某一指定数组内的值 并随机生成数量const fruit = ['apple', 'banana', 'orange']let fruitInfo = {}fruitInfo = fruit.map(item => { return { [item]: Math.floor(Math.random() * 10) }})console.log(fruitInfo)输出:[{apple: .转载 2020-08-04 16:56:24 · 540 阅读 · 0 评论 -
antd 父组件获取子组件中form表单的值
子组件import React, { Component } from 'react';import { Form, Input } from 'antd';const FormItem = Form.Item;class Forms extends Component{ getItemsValue = ()=>{ //3、自定义方法,用来传递数据(需要在父组件中调用获取数据) const valus= this.props.form.getFieldsV转载 2020-07-24 15:57:32 · 6944 阅读 · 1 评论 -
react之withRouter的作用
withRouter的作用:把不是通过路由切换过来的组件,将react-router的history、location和match三个对象传入到props对象上;默认情况下必须是经过路由匹配渲染的组件才存在this.props,才拥有路由参数,才能使用编程式导航的写法,执行this.props.history.push('/detail')跳转到对应路由的页面然而不是所有组件都直接与路由相连(通过路由跳转到此组件)的,当这些组件需要路由参数时,使用withRouter就可以给此组件传入路由参数,此时转载 2020-07-10 11:43:37 · 1880 阅读 · 0 评论 -
react中日期时间格式化
项目开发过程中,总会遇到这样那样的时间格式化问题,那么在react中,日期时间格式化该怎么解决??一种是直接使用插件 moment,方便快捷完美的解决时间格式化问题;另一种是,假如整个项目只有一处使用到了时间,那么使用 moment会显得臃肿和浪费, 这时可以自己开发时间格式化组件,来满足项目需求。这里我们先说一下moment插件的用法:一、使用 moment 日期格式化插件,方便快捷...转载 2020-05-06 11:04:50 · 2503 阅读 · 0 评论 -
antd react 警告 index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an
antd版本:4.1.4引用antd的示例组件一直报警告,index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Tabs which is inside StrictMode. Instead, add a ref directly to t...转载 2020-04-22 13:02:25 · 3549 阅读 · 0 评论 -
四舍五入函数封装最全版
export const fixedAndRound = function (num) { var str = String(num); var index = str.indexOf('.'); if (index == -1) { var data = str + '.00'; return data; } else { var left_one = ...转载 2020-04-13 13:41:12 · 186 阅读 · 0 评论 -
【React】存储全局数据
参考链接:https://segmentfault.com/a/1190000012057010?utm_source=tag-newestwebstoragewebstorage是本地存储,存储在客户端,包括localStorage和sessionStorage。localStoragelocalStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除loc...转载 2020-04-07 09:54:39 · 1361 阅读 · 0 评论 -
React动态增加表单
实现点击按钮添加联系人的表单,效果如图所示点击按钮,效果如图所示定义动态添加的表单 const {contactpenlist} = this.state //添加联系人列表 const contactlist = contactpenlist.map((elem,index)=>( <Card title ='联系人' k...转载 2020-04-06 15:37:01 · 3765 阅读 · 2 评论 -
react使用moment进行日期格式化
导入momentimport moment from 'moment';使用方式年月日,时分秒moment().format('YYYY-MM-DD HH:mm:ss'); // 2019-08-23 21:03:43星期几moment().format('d'); // 4相对时间moment("20130823", "YYYYMMDD").fr...转载 2020-03-19 09:57:07 · 634 阅读 · 0 评论 -
antd 时间组件DatePicker获取时间并格式化
antd选择日期的控件DatePicker是输出的时间对象可以通过moment获取首先安装momentnpm install moment引入momentimport moment from 'moment';使用momenttime为取得表单里时间值时间戳moment(time).unix() //123456789输出大众格式...转载 2020-03-18 15:29:57 · 14495 阅读 · 4 评论 -
React中使用LocalStorage用户登录
localStorage 通常用来存储服务器发送的一些数据或者用户自定义数据。localStorage 中的键值对总是以字符串的形式存储。 (意味着数值类型会自动转化为字符串类型)。与 cookie 相比,localStorage 的存储量较大(cookie只有2k,只能存放字符串),下面介绍如何使用 localStorage 存储、获取、使用数据。与 sessionStorage 相比,存储...转载 2020-03-10 16:15:54 · 1594 阅读 · 0 评论 -
react中如何实现一个按钮的动态隐藏和显示(有效和失效)
初始准备工作constructor(props) { super(props); /* * 构建导出数据的初始参数,结合用户下拉选择后动态设置参数值 * */ this.state = { btnStatus: false, dateStart: '', dateEnd: '', currentTy...转载 2020-03-06 10:42:02 · 2148 阅读 · 0 评论 -
react+antd解决报错:Module not found: Can't resolve 'antd/es/affix'
问题今天在使用antd的时候,引入“抽屉”组件的时候报错Module not found: Can’t resolve ‘antd/es/Drawer’,找了一些文档发现有遇到类似问题但是没有看到解决办法,所以还是写一篇文档来记录以及解决下这个问题吧。解决这个问题其实就是antd的版本问题,你目前引入的版本和你所使用的组件相冲突,当前引入的组件在当前的antd版本内找不到。所以解决起来...转载 2020-03-04 10:53:17 · 7585 阅读 · 0 评论 -
获取天气---百度API,JSONP实现跨域请求
一、安装Jsonpnpm install jsonp --save二、封装组件建一个axios文件夹,创建index.js文件import JsonP from 'jsonp' export default class Axios{ static jsonp(options){ return new Promise((resolve, re...转载 2020-02-17 22:14:24 · 881 阅读 · 0 评论 -
react中使用jsonp跨域
https://www.npmjs.com/package/jsonp原生jsonp的使用1.yarn add jsonp --save2.import JsonP from 'jsonp'3.JsonP('url',{},function(err, data){ console.log(data)})2.封装import JsonP from 'json...转载 2020-02-17 22:11:55 · 2654 阅读 · 0 评论 -
修改Antd的主题
在webpack.config.js中修改Antd的主题 //添加此内容可以解析less文件 { test: /\.less$/, use: [ require.resolve('style-loader'), { ...原创 2020-02-14 14:39:40 · 419 阅读 · 0 评论 -
项目实战三、antd的babel-plugin-import实现按需加载
babel-plugin-import是一个用于按需加载组件代码和样式的 babel 插件(原理)1.通过yarn addbabel-plugin-import 安装babel-plugin-import插件yarn addbabel-plugin-import 2.在webpack.config.js中添加如下代码进行配置antd的按需加载 ['import',{li...原创 2020-02-14 14:28:57 · 2748 阅读 · 0 评论 -
antd按需加载时报错
当实现antd按需加载的时候报这个错可能是less版本不支持,需要改变less版本Failed to compile../node_modules/antd/lib/style/index.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-4-1!./node_modules/postcss-loader/src??po...原创 2020-02-14 14:25:12 · 543 阅读 · 0 评论 -
项目实战二、antd的安装与应用
1.yarn add antd安装antdyarn add antd2.引入antd中的组件,并引入antd.css,实例如下import React from 'react'import Child from './Child'//引入子组件import {Button} from 'antd'//引入antd中的Button组件import './index.less'...原创 2020-02-14 13:29:14 · 662 阅读 · 0 评论 -
项目实战一、基础组件安装
1.安装4.2.2版本的react-router-domcnpm install react-router-dom@^4.2.2 --save2.安装axiosyarn add axios 3.安装4.1.0版本的less-loadercnpm install less-loader@^4.1.0 --save4.安装后package.json文件如下5...原创 2020-02-14 13:15:36 · 938 阅读 · 0 评论 -
npm安装指定版本的react-router-dom
npm 安装大于react-router-dom4.2.2小于5.0.0版本的命令行cnpm install react-router-dom@^4.2.2 --save类似的操作还有npm安装react、react-dom包npm install react@16.3.0 react-dom@16.3.0 --save ...原创 2020-02-14 09:21:24 · 2821 阅读 · 1 评论 -
React的生命周期
声明一个父组件Life.js代码如下import React from 'react'import Child from './Child'//引入子组件export default class Life extends React.Component{ constructor(props){ //初始化 super(props); this.stat...原创 2020-02-13 23:35:52 · 95 阅读 · 0 评论 -
react中componentWillMount 和 componentDidMount的区别
1、componentWillMount 将要装载,在render之前调用;componentDidMount,(装载完成),在render之后调用2、componentWillMount 每一个组件render之前立即调用componentDidMount render之后并不会立即调用,而是所有的子组件都render完之后才可以调用3、componentW...转载 2020-02-13 23:28:07 · 672 阅读 · 0 评论 -
yarn使用简介
yarn简介:yarn是facebook发布的一款取代npm的包管理工具。yarn的特点:速度超快。 Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。 超级安全。 在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。 超级可靠。 使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能...转载 2020-02-13 19:40:36 · 194 阅读 · 0 评论 -
创建第一个Hello World程序
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Hello React!</title><script src="./common/react.development.js"></script><script src...原创 2020-02-11 21:07:39 · 150 阅读 · 0 评论 -
React项目从开发到上线运行全过程
随着react的流行,越来越多的前端工程师使用react来进行开发,当时用react时,creact-react-app无疑进入了大家的眼帘,本篇文章主要讲述如何从无到有的使用creact-react-app开发react应用,然后本地调试,直到最后的上线运行。本篇文章内容结构说明,主要有以下12个部分:1.安装nodejs2.使用nodejs的npm包安装create-react-...转载 2019-12-24 13:54:59 · 1217 阅读 · 0 评论 -
reactjs中文入门教程
下载地址本视频教程是ReactJS的一个基础的中文视频教程,主要讲解的是ReactJS的基础知识,本视频教程的主要内容有:1、Rreact概述2、JSX 语法及特点介绍3、React组件生命周期详解4、React 属性和状态详解5、React 中事件的用法6、React 组件的协同使用7、React 表单详解8、React 组件性能调优9、测试 React ...转载 2019-12-24 11:35:01 · 297 阅读 · 0 评论 -
React前端开发环境搭建
先,我们需要明确的是React和很多前端框架一样,底层都还是js以及html,即便它有着看似特殊的jsx语法。我们要在服务端运行js,就需要依赖一个环境,和运行war包需要tomcat一类中间件一样,运行js需要node.js,同时因为我们用了各种框架,所以相应的module依赖也需要,需要使用npm工具,这就类似于maven管理jar包依赖一样同样maven可以修改镜像,而npm也可...转载 2019-12-20 16:10:10 · 169 阅读 · 0 评论 -
React组件生命周期
实例化首次实例化getDefaultPropsgetInitialStatecomponentWillMountrendercomponentDidMount实例化完成后的更新getInitialStatecomponentWillMountrendercomponentDidMount存在期组件已存在时的状态改变componentWillR原创 2017-07-18 19:05:09 · 168 阅读 · 0 评论