react
关注
分享
扫一扫
react相关
Shimmer-612
这个作者很懒，什么都没留下…
展开
-
useReColumnWidth自适应Table列宽hooks
在使用antd中Table组件的时候，如果columns的总宽度不够容器的宽度，就会自适应，每个column的宽度会改变。但是有的列不希望自适应，就应该展示设定的宽度。当宽度不够撑满的时候，就让最后一列和没有设置宽度的column自适应。原创 2023-05-18 10:31:49 · 343 阅读 · 1 评论 -
实现“羊了个羊”玩法的消消乐（react）
用react实现“羊了个羊”玩法的消消乐原创 2022-09-19 10:10:02 · 1335 阅读 · 1 评论 -
react自定义hook解决websocket连接,useWebSocket
react自定义hook使用websocket原创 2022-08-09 09:27:37 · 2359 阅读 · 0 评论 -
Echarts风向玫瑰图
Echarts柱状极坐标风向玫瑰图的实现echarts代码本来看到玫瑰图，就看到了echarts示例中饼图的南丁格尔玫瑰图。发现不太像。后来发现是柱状图极坐标系堆叠图。一开始用了多个series，图例是能实现，但是显示的图有问题。柱太细了数据一多根本看不见。使用一个series，图例又没办法绑定到数据。还好图例比较简单，决定直接自己写一个。eharts的配置项真的太难了。找的很头疼，实现的也很头疼。一辈子不想写图表了。图例的实现首先根据数据生成一个title数组，因为要判断当前点击和未点原创 2022-05-20 08:51:49 · 3748 阅读 · 0 评论 -
reduxjs/toolkit使用
reduxjs/toolkit使用1、安装要和react-redux一起使用cnpm i react-redux @reduxjs/toolkit -D 2、新建redux文件夹在下面新建store.ts、slice.ts、hook.ts三个文件store.tsimport { configureStore } from "@reduxjs/toolkit";import stateSlice from "./slice";import otherSlice from "./otherSl原创 2022-05-10 08:35:19 · 2979 阅读 · 0 评论 -
react-hooks中useContext的使用
react-hooks中useContext的使用1、作用useContext可以多层嵌套传输数据和方法2、使用1、新建一个store.js文件，使用React.createContext()创建一个自己的Contextimport React from "react";const myContext = React.createContext(null);export { myContext };2、最外层组件使用myContext.Provider包裹然后value传入自己需要的原创 2022-04-07 15:25:06 · 452 阅读 · 1 评论 -
react-hooks之useRef，useImperativeHandle的使用
react-hooks之useRef，useImperativeHandle的使用1、函数内部使用useRef可以用来做数据持久化，也可以用来获取到元素实例ref.current的变化并不会导致函数组件的重新加载不像useState可以用一个假的useState，结合useEffect的依赖让useRef的值改变后重新加载函数import React, { useState, useContext, useRef, useEffect } from "react";const App = ()原创 2022-04-07 15:23:53 · 856 阅读 · 2 评论 -
在线商城和商城后台管理系统
在线商城和商城后台管理系统1、商城使用了vue2+elementUI实现了登录注册、浏览商品、购买商品、收藏商品、商品搜索、加入购物车、查看订单、添加收货地址、在线客服、分类查看商品的等功能2、商城后台管理系统使用了react+antd实现了注册登录、商城整体数据的查看，用户管理、商品管理、订单管理、财务管理、客服服务的功能，其下还分各种小功能对用户商品订单等详细功能进行增删改查的操作2、商城的后端使用了express+mongoDB使用了node.js的express和mongoDB数据库原创 2022-02-11 14:55:05 · 9315 阅读 · 0 评论 -
react中使用谷歌地图并定位
react中使用谷歌地图1、引入index.html文件中引入谷歌地图<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <lin原创 2022-02-07 16:20:49 · 1846 阅读 · 2 评论 -
react项目国际化
react项目国际化这里使用的react-intl1、安装react-intlnpm install react-intl --save 或者 cnpm install react-intl --save2、引入在需要国际化的文件引入react-intl需要全局国际化就在app.js文件中引入import React, { Component } from "react";import { IntlProvider } from "react-intl";class Page exten原创 2022-02-07 16:16:01 · 1397 阅读 · 0 评论 -
表单添加相同多组规则实现react+ant3
title: 表单添加多组规则date: 2021-07-30tags:- antd起因框架react+ant3（老项目重构很难）新版本一个需求原型如下：[可以有多个规则，且规则之间时间需要连续。上一个结束时间的第二天要是下一个规则的开始时间。如果第一个结束时间是7月30号,下个月的开始时间要是7.31号。依次类推。还要可以批量设置。就是一次性设置多个。首先肯定想到的是用数组map,用的form表单。就新建一个数组arr=[0],点击添加按钮的时候就再push一个0，删除按钮就arr..原创 2021-07-30 22:24:32 · 512 阅读 · 0 评论 -
react项目中修改ant design 主题色
react项目中修改ant design 主题色1、安装less和less-loadernpm i less --save注意：less-loader 版本大于等于5.0.0npm i less-loader --save2、在webpack.config.dev.js文件中添加如下代码 { test: /\.less$/, use: [{ loader: "style-loader" // creates st原创 2021-05-26 13:55:16 · 1238 阅读 · 0 评论 -
react 中使用Swiper轮播图插件
第一步、安装 npm i swiper第二步、使用import { Swiper, SwiperSlide } from 'swiper/react';//根据自己的需要引用样式import 'swiper/swiper.less';export default () => { return ( <Swiper spaceBetween={50} slidesPerView={3} onSlideChange={() =>原创 2021-03-08 16:07:02 · 2209 阅读 · 2 评论 -
Umijs中davJS的学习
最近公司新项目用的UmiJs3.x，整个项目的数据，通过内置的Davjs来控制。昨天自己分析了一下Davjs。但是脑海中的概念还是很模糊。今天再梳理一下。第一步首先是在Models文件夹下创建一个JS文件const GlobalModel = { //model的名称 namespace: "global", state: { //放数据的地方 user:{} }, effects: { // 异步处理数据，不能直接修改数据，需要通过put调原创 2021-03-02 09:40:35 · 909 阅读 · 0 评论 -
React项目(UmiJS)中使用高德地图
React AMap这是一个基于 React 封装的高德地图组件.文档地址https://uiw.gitee.io/react-amap/#/01、安装npm install @uiw/react-amap --save02、使用在文档左侧找到需要使用的例子。在右侧直接复制对应代码。按需进行修改。03、例子（贝塞尔曲线的使用）import React, { useState } from "react";import { Map, APILoader, BezierCurve } fro原创 2021-03-02 09:33:33 · 1140 阅读 · 0 评论 -
react中进一步封装axios,对错误信息进行拦截
react中进一步封装axios之前在react项目中封装了axios但是在每次请求的时候都要判断，后台返回的状态码，很麻烦。async componentDidMount () { await $http.get('/station/list').then((res)=>{ this.setState({ data: res.data.data, total:res.data.data.length }) if(res.data.d原创 2020-12-22 08:49:06 · 889 阅读 · 0 评论 -
react中像vue中一样封装路由和路由的跳转
react中封装路由在src目录下新建router.js文件//导入组件import Main from './components/main'import Admin from './components/eAdmin'import Home from './views/home'import Login from './views/login/login'//创建路由const routes = [{ path: '/home', component: Home,原创 2020-12-15 09:26:29 · 755 阅读 · 0 评论 -
react项目中封装axios，设置请求头
react中封装axios在src目录下新建一个request.js文件。import axios from "axios";//设置请求得基准地址axios.defaults.baseURL = 'http://xxxx.com/api'const $http = axios.create();//设置请求头$http.interceptors.request.use(config => { // 给请求头加上Authorization,authJWT的字段,值为token原创 2020-12-15 09:03:11 · 3326 阅读 · 1 评论 -
在React中使用echarts,封装echarts组件
01、在React中使用echarts开始先百度如何在react项目中使用echarts。按照百度到的步骤写，安装然后引入echars-for-react这个包。编译没有错。但是浏览器报错：dispose 和 getInstanceByDom 的prototype undefinded。因为我用的是函数式组件，没有生命周期。我一开始怀疑是不是因为函数式组件的问题。我换成了类组件之后，还是报同样的错。没办法我只能去官网，按照官方的在 webpack 中使用 ECharts。如下所示成功了！原创 2020-12-14 13:26:50 · 1775 阅读 · 0 评论 -
react学习02
2020.12.0901、react路由安装npm i react-router-dom使用import React from 'react';import ReactDOM from 'react-dom';import { BrowserRouter as Router, Link, NavLink, Route } from 'react-router-dom'import './index.css'function AA (props) { console.log(pr原创 2020-12-10 11:33:19 · 117 阅读 · 0 评论 -
react学习01
这里写自定义目录标题欢迎使## 2020.12.08学习内容01、react的传值02、条件渲染 if判断03、列表渲染 for循环04、状态管理05、生命周期06、React事件07、小demo疫情地图08、ajax请求（axios)欢迎使## 2020.12.08学习内容01、react的传值props传值 单向流动 父传子props可以传递函数父元素中使用state去控制子元素的props，可以达到向父元素向子元素传值class Father extends React.Compon原创 2020-12-10 11:32:24 · 136 阅读 · 0 评论