react
陈序员01
一路走来,辛酸二字不足形容,道行太浅,终究惨不忍睹,特在此记上一笔,以备将来继续踩坑搬砖前行。
展开
-
创建react项目教程
1.首先需要node环境,有node环境才能npmnode官网:https://nodejs.org/zh-cn/ 建议下载稳定版2.安装node后可以到命令提示符面板查看node的版本node -v npm -v 有版本代表安装成功了3.启动终端开始安装react全局脚手架npm install -g create-react-app4.选择一个文件夹或者新建文件夹,要放react项目 ,cd到要放react项目的文件夹cd react-demo5.搭建react项目 rea原创 2020-09-17 14:04:01 · 551 阅读 · 0 评论 -
react引入图片的两种方式
react src里面引入图片的几种方式,因为es6不支持在 img 标签内直接写图片的路径,如 img src="…/images/photo.png"/ 会引入不了,解决方法如下:(1)第一种:import 方法:如果该图片反复调用建议使用import 引入方法import imgURL from './../images/photo.png';<img src={imgURL} />(2)第二种: require方法 这种方法需要注意的是,require里只能写字符串,不能写变原创 2020-09-17 12:36:37 · 1252 阅读 · 0 评论 -
react中使用HTML5 <iframe> 嵌入式标签
直接看代码吧.js文件import weather from './weather' //引入下面weather.js文件const IndexView = () =>{ return ( <iframe style={{marginTop: "-0.3vh"}} width="100%" scrolling="auto" height="100%" frameBorder="0"原创 2020-09-17 12:33:38 · 1194 阅读 · 0 评论 -
解决react 在 ie11上运行不起来的问题
如何让react 兼容ie11react跟ie并不兼容,存在兼容问题,要想React 兼容 ie11 需要安装插件 进行配置1.npm 安装:npm install react-app-polyfill2.然后在src下的index.tsx入口文件中最前面引入react-app-polyfillimport "react-app-polyfill/ie11";3.根据官网的提示,还需要在package.json文件中的browserslist中添加"ie 11" 或者"ie >= 9"原创 2020-09-17 12:15:37 · 2990 阅读 · 0 评论 -
echarts 常见功能,刻度自适应,位置移动,图例,刷新,自适应等问题
曲线数据最大值最小值自适应解决方法:(注意:只在数值轴中(type:‘value’)中有效)yAxis: { scale:true,根据数据自适应最大值最小值},或者:手动设置yAxis: { max:100, //刻度最大值 min:1,//刻度最小值},图表自适应页面的方法:window.addEventListener("resize", () => { myChart.resize();//resize 页面大小改变,调整大小});图表位置调整方原创 2020-09-17 11:58:15 · 2582 阅读 · 0 评论 -
react <column/> 如何处理返回的中文字段数据 for in 哈希结构体
返回的响应体结构处理成后页面显示的样子基础 for in 实现案例:values: { D区: "26.02", 温度: "26.02", 湿度: "2" }function dataDispose(values){ let res = [] for (const key in values) { //key=中文字段 res.push(<span key={key}>{key}:{values[key]}</span>)原创 2020-09-17 11:03:58 · 543 阅读 · 1 评论 -
实现ant design的<Select>多选框组件中加上全选功能案例
本文用了是React+TypeScript+ant design的实例通过 ant design select 属性Api 提供的 dropdownRender 完成ant design select 地址Select props 两个属性都会用到属性说明dropdownRender自定义下拉框内容setFieldsValue设置表单的值代码:import React, {useState} from 'react'const IndexView = (原创 2020-09-17 10:33:02 · 9337 阅读 · 2 评论 -
route上使用react-transition-group
react-transition-group简介:react-transition-group 一个官网提供的动画过度库,css动画的方式,比较局限,涉及到一些js动画的时候没法处理了,借住这个react-transition-group模块可以更方便的实现更加复杂的动画效果,而官方提供的三个组建(Transition,CSSTransition,TransitonGroup)。http://reactcommunity.org/react-transition-group/ 官网安装 react-t原创 2020-09-03 16:50:21 · 354 阅读 · 1 评论 -
react-transition-group的使用方法
react-transition-group简介:react-transition-group 一个官网提供的动画过度库安装# npmnpm install react-transition-group --save#如果用了 TypeScript 需要安装 @typenpm install @types/react-transition-group# yarnyarn add react-transition-groupCDN/外部由于Reaction转换组相当小,在应用程序中包含原创 2020-09-03 16:25:24 · 5093 阅读 · 0 评论