react
森林的尽头是阳光
生而俗人,喜欢金钱和感动
展开
-
react实现表格滚动
react实现表格滚动1、js组件import React from 'react';import styles from './TableRolling.module.scss'class TableRolling extends React.Component { constructor(props) { super(props); } componentDidMount = () => { this.industryNews =原创 2021-01-21 16:18:18 · 1542 阅读 · 4 评论 -
React Hooks一 useState() 、useEffect()
Hook 是什么? Hook 是一个特殊的函数,它可以让你“钩入” React 的特性。例如,useState 是允许你在 React 函数组件中添加 state 的 Hook。useState()useEffect()useState()1. 使用// 声明一个叫 “count” 的 state 变量,他的初始值是0const [count, setCount] = useState(0)2. 参数唯一的参数就是初始state,可以是数字、字符串、对象、数组等等3. 返回值.原创 2020-12-15 15:32:30 · 271 阅读 · 0 评论 -
react + canvas点线动画背景
效果图实现步骤1、public文件夹中的index.html引入2、将变量存起来// 引入<script src='./Dot.js'></script>// 变量存储<script> window.circle = circle;</script>3、组件中使用constructor(props) { super(props); // 创建一个 ref 来存储 canvas 的 DOM 元素 this.c原创 2020-10-10 16:16:25 · 1129 阅读 · 0 评论 -
react 跨域配置
1、单个跨域package.json中"proxy":"https://192.168.6.32:3000"2、配置多个,使用插件 http-proxy-middlewarehttp-proxy-middleware 插件官网文档安装:npm install http-proxy-middleware --save# oryarn add http-proxy-middleware使用:react项目中,src目录下新建 setupProxy.js,内容如下const { cr原创 2020-08-06 16:31:58 · 394 阅读 · 0 评论 -
百度地图API gps坐标转换为百度坐标
百度地图API官网示例我写的例子,基于react实现的功能:根据点画折线在点位置插入自定义图标点击图标的时候显示一张图片传递的gps坐标需要转换成百度坐标因为坐标转换一次转换不能超过10个,所以需要在处理下数组父级传递过来的值类似这种结构,经纬度值、点击弹出的图片地址完整代码(细节就不拆分了,备注都写的比较详细)import React from 'react';import { message } from 'antd';const BMap = window.BMap;原创 2020-07-27 11:42:42 · 2676 阅读 · 6 评论 -
componentWillReceiveProps使用
componentWillReceiveProps(nextProps){ if(this.props.data.photo != nextProps.data.photo){ this.setState({ logoUrl: nextProps.data.photo }) } }原创 2020-07-24 15:24:07 · 1570 阅读 · 0 评论 -
react项目搭建遇到的问题
1、npx create-react-app 项目名, 搭建项目没有src原因:create-react-app脚手架版本过低解决:先卸载下:npm uninstall -g create-react-app再重新安装:npm install -g create-react-app接着运行:create-react-app 项目名然后进入文件夹:cd 文件夹,npm start 就...原创 2020-04-21 16:21:43 · 205 阅读 · 0 评论 -
react入门--基础知识
create-react-app官方脚手架准备开发环境安装npm install create-react-app安装之后,构建项目create-react-app 项目名进入项目所在目录npm start 然后就OK了,localhost:3000 打开脚手架,就可以开始使用了,src中编写代码...原创 2019-12-08 12:38:19 · 106 阅读 · 0 评论 -
redux概念、基础
Redux的特点统一的状态管理,一个应用中只有一个仓库(store)仓库中管理了一个状态树(statetree)仓库不能直接修改,修改只能通过派发器(dispatch)派发一个动作(action)更新state的逻辑封装到reducer中参考链接:https://www.jianshu.com/p/786e7174b0c2https://www.redux.org.cn/docs...原创 2019-11-11 17:53:05 · 189 阅读 · 0 评论 -
react网页添加水印
原理:在页面覆盖一个盒子,取消鼠标事件,层级最高,透明,用canvas,绘制背景为了防止内部数据泄露,拍照等等,水印可以添加登录人姓名,公司名等等代码:(借鉴大神的)let watermark = {}let setWatermark = (str, option = {}) => { let id = '123.123.123'; if (document.getEle...转载 2019-11-07 19:40:38 · 2499 阅读 · 0 评论 -
react入门,简单的todolist--代码
重点1、export import 成对出现,有导出才能导入2、this.setState({}) 用于改变数据3、父向子组件传值:以属性绑定方式,子组件中用 this.props 接收使用4、子组件向父组件传值:父元素绑定属性是一个函数,子组件一属性方式接收,调用父组件函数来传值5、组件名首字母大写6、li中最好加上一个 key属性,key属性的值不能相同7、尽量不要直接...原创 2019-08-21 23:00:43 · 191 阅读 · 0 评论