![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
炉火纯青-旺
这个作者很懒,什么都没留下…
展开
-
React 白屏问题处理
4自 React 16 起,任何未被错误边界捕获的错误将会导致整个 React 组件树被卸载,从而出现白屏问题解决办法:基于memo封装wrapMemo组件1、代码目录2、ErrorBoundary.jsimport React from 'react';import PropTypes from 'prop-types';class ErrorBoundary extends React.Component { constructor(props) {原创 2022-03-09 10:18:44 · 3583 阅读 · 0 评论 -
React antd table 实现表头横向拖动
1、安装依赖npm install --save react-resizable2、App.jsimport { useState, useEffect } from 'react';import { Table, Tag, Space } from 'antd';import { Resizable } from 'react-resizable';import './App.css';const defaultColumns = [ { title: 'Na原创 2021-09-28 10:26:40 · 2436 阅读 · 1 评论 -
React Dialog 组件封装
1、App.jsimport React, { useState } from 'react'import Dialog from './components/dialog/Dialog'const App = () => { const [show, setShow] = useState(false) return ( <div className="dialogPage"> <h3>DialogPage&原创 2021-08-19 08:47:21 · 696 阅读 · 0 评论 -
React 笔记
自定义Hook有时候我们会想要在组件之间重用一些状态逻辑,目前位置有两种主流的解决方案:高阶组件和render props。自定义hook可以让不增加组件的情况下达到同样的目的。自定义Hook是一个函数,其名称以“use”开头,函数内部可以调用其它的Hookimport React, {useState, useEffect} from 'react'const App = () => { const [count, setCount] = useState(0)原创 2021-08-17 16:42:04 · 105 阅读 · 0 评论 -
React antd tags封装
import React, { memo, useState } from 'react'import { Tag, Input } from 'antd'import { TweenOneGroup } from 'rc-tween-one'import { PlusOutlined } from '@ant-design/icons'import PropTypes from 'prop-types'const Tags = memo((props) => { const {.原创 2021-08-04 16:13:45 · 649 阅读 · 0 评论 -
react antd form 组件封装
项目目录结构1、app.jsimport FormCom from './components/FormCom'import './App.css'function App() { const items = [ { type: 'Input', label: '部门名称', name: 'name', rules: [{ required: true }] }, { type: 'Sel..原创 2021-07-14 20:17:35 · 1033 阅读 · 0 评论 -
npm react 简单组件封装
1、文件目录结构2、Switch.jsimport React from 'react'const Switch = () => { return ( <div> <h1>Switch</h1> </div> )}export default Switch3、index.jsexport { default as Switch} from "./原创 2021-07-05 17:32:07 · 323 阅读 · 0 评论 -
react + leaflet 基础底图图层组hooks封装
1、useLayerGroup.jsimport { useEffect } from 'react';const { L } = window;const { TILE_URL, TK } = window.TDT_CONFIG;const useLayerGroup = (layerGroup, mapInfo) => { const { type, projection, name, minZoom, maxZoom } = mapInfo.toJS(); c原创 2021-06-28 09:53:49 · 409 阅读 · 0 评论 -
React antd配置
一、安装依赖 npm install antd react-app-rewired customize-cra babel-plugin-import --save 二、创建文件 config-overrides.js原创 2021-06-03 14:04:42 · 339 阅读 · 0 评论 -
React 图层属性popup实现
1:App.jsimport React, { useState, useEffect } from 'react';import { Select } from 'antd';import classnames from 'classnames/bind';import BScroll from 'react-custom-scrollbars';import { LeftOutlined, RightOutlined } from '@ant-design/icons';impo.原创 2020-09-27 15:53:19 · 1306 阅读 · 2 评论 -
截图
https://github.com/tsayen/dom-to-image原创 2020-05-25 16:00:54 · 127 阅读 · 0 评论 -
react + leaflet + 天地图瓦片
1:在pulblic文件夹index.html中引入全局leaflet css文件<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.css">2:安装leafletcnpm install leaflet --save3:组件Map.js中添加天地图瓦片import React from 'react';import L from "leafle.原创 2020-05-25 10:12:26 · 2806 阅读 · 2 评论 -
react 笔记
1:react 绑定多个class<div className={`${style.triangle} ${shrink?style.triangleRight:style.triangleLeft}`}原创 2020-05-20 10:20:29 · 153 阅读 · 0 评论 -
react 相关问题解决方案
1:npx create-react-app react-demo 卡顿npm config set registry https://registry.npm.taobao.org-- 配置后可通过下面方式来验证是否成功npm config get registry-- 或npm info express...原创 2020-04-09 14:36:32 · 104 阅读 · 0 评论 -
React-mapbox-gl
import React, { Component } from "react";import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';const Map = ReactMapboxGl({ accessToken:'pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQ...原创 2020-01-03 16:50:42 · 1595 阅读 · 1 评论 -
React Hooks 总结
1:useStateimport React, { useState } from 'react';function App() { const [ Switch, setSwitch ] = useState("打开!"); const newName = () => { Switch === "打开"? setSwitch("关闭"):setSwitch("打开...原创 2020-01-03 11:10:23 · 236 阅读 · 0 评论 -
React 点击带参数函数取消自动执行
1:点击带参数函数会自动执行,函数如下<span className={ style.releasedLinkBtn} onClick={ this.copyUrl(url) }>复制</span>2:解决方法,将函数更改为箭头函数<span className={ style.releasedLinkBtn} onClick={ ()=>thi...原创 2019-11-22 09:33:58 · 85 阅读 · 0 评论 -
React 根据url生成二维码
1:安装cnpm install qrcode.react -S2:引入import QRCode from 'qrcode.react'3:使用<QRCode value={ url } // 需要生成二维码图片的url地址 size={ 150 } // 二维码图片大小 fgColor="#000000" ...原创 2019-11-19 13:36:56 · 1492 阅读 · 0 评论 -
React 复制功能实现
1:安装cnpm install copy-to-clipboard -S2:使用import React from 'react'import copy from 'copy-to-clipboard';class App extends React.Component{ constructor(props){ super(props); ...原创 2019-11-19 09:55:03 · 574 阅读 · 0 评论