React
关注
分享
扫一扫
duansamve
我的Web前端(React、Vue)、NodeJS......开发笔记
展开
-
使用React模拟一个终端（XShell）
import React from 'react';import { Button } from 'antd';import { AuthDiv } from 'components';import { Terminal } from 'xterm';import { FitAddon } from 'xterm-addon-fit';import FileManager from './FileManager';import { http, X_TOKEN } from 'libs';...原创 2021-06-18 23:04:37 · 1985 阅读 · 5 评论
-
前端终端组件Xterm.js使用方法
xterm 是一个使用 TypeScript 编写的前端终端组件，可以直接在浏览器中实现一个命令行终端应用。主要特性：终端应用程序正常工作：Xterm.js适用于大多数终端应用程序，如bash，vim和tmux，这包括对基于curses的应用程序和鼠标事件支持的支持Performant：Xterm.js 非常快，它甚至还包括一个GPU加速的渲染器。丰富的 unicode 支持：支持CJK，表情符号和IME。自包含：零依赖性。可访问：可以使用screenReaderMode选项打开屏原创 2021-05-13 15:26:24 · 14437 阅读 · 2 评论 -
高阶函数
什么叫高阶函数？如果一个函数符合下面2个条件中的任何一个，那该函数就是高阶函数：1、若A函数接收的参数是一个函数，那A函数就可以称之为高阶函数；2、若A函数调用的返回值依然是一个函数，那么A函数也可以称之为高阶函数。常见的高阶函数有：Promise、setTimeout、arr.map()等...原创 2021-05-04 14:46:51 · 182 阅读 · 0 评论 -
React Hooks详解
React的函数式组件式本身是没有状态的和其他类似于class组件的功能，所以一开始，函数组件一般只作为容器组件存在，用来展示父级组件传入的值。而16.8之后出现的 hooks(钩子)，打开了函数式组件的新大门。useState作用：用来记录函数式组件的状态。使用方式：import React, { useState } from 'react'const [n, setN] = React.useState(0)例子：import React, {useState} from原创 2020-10-14 22:32:59 · 5773 阅读 · 3 评论 -
React：虚拟DOM和diff算法
虚拟DOM：用JS对象的形式来模拟页面上DOM嵌套关系。原创 2020-07-27 21:39:57 · 151 阅读 · 0 评论 -
Web端实时播放RTSP视频流（监控）
2、点击Windows图标，选第一个：Windows builds from gyan.dev3、跳转到下载页面：4、下载后放到合适的位置，不用安装，解压即可：5、配置path复制解压后的\bin路径，配置环境变量如图：命令行输入：ffmpeg -version出现如下信息则说明配置成功。原创 2025-01-15 11:46:23 · 905 阅读 · 0 评论 -
LogicFlow工作流在React和Vue3中的使用
LogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和简单灵活的节点自定义、插件等拓展机制，方便我们快速在业务系统内满足类流程图的需求。原创 2024-08-12 10:26:37 · 1415 阅读 · 2 评论 -
React/Vue项目解决跨域的方法
CORS是浏览器的一种机制，当发起跨域请求时，服务器可以返回一个特殊的响应头Access-Control-Allow-Origin来授权给定源访问该资源。只需要在服务器端设置响应头即可实现CORS。通过在请求中添加一个回调函数的参数，服务器返回的数据会包裹在该回调函数中，实现跨域获取数据。在上述示例中，将以/api开头的请求转发到http://api.example.com，并将请求路径中的/api部分去除。在上述示例中，将以/api开头的请求转发到http://api.example.com。原创 2024-07-22 22:06:07 · 720 阅读 · 0 评论 -
React中高阶组件
高阶组件：高阶组件就是一个接收一个组件并返回另外一个新组件的函数。普通组件：MyComponent.tsx。高阶组件：Hoc.tsc。使用：App.tsx。原创 2024-05-15 23:20:49 · 180 阅读 · 0 评论 -
react router v6总结
注意其中的NavLink及css中添加的active属性。注意其中的index: true。原创 2024-05-10 13:52:15 · 548 阅读 · 1 评论 -
create-react-app完整配置别名alias方法
在使用 create-react-app 创建的项目中配置路径别名，可以使用 react-app-rewired 这个库来覆盖 create-react-app 的默认配置。这样，@components/SomeComponent 就会被解析为 src/components/SomeComponent 文件。在项目根目录中创建一个 config-overrides.js 文件，用于自定义配置。原创 2024-05-09 21:40:44 · 903 阅读 · 0 评论 -
React常用组件分享
React Awesome SliderReact Slider Carousel Component - react-awesome-slider原创 2024-05-06 22:15:42 · 507 阅读 · 0 评论 -
React 路由跳转
默认情况下，开启的是 push 模式，也就是说，每次点击跳转，都会向栈中压入一个新的地址，在点击返回时，可以返回到上一个打开的地址，就像上图一样，我们每次返回都会返回到上一次点击的地址中当我们在读消息的时候，有时候我们可能会不喜欢这种繁琐的跳转，我们可以开启 replace 模式，这种模式与 push 模式不同，它会将当前地址替换成点击的地址，也就是替换了新的栈顶我们只需要在需要开启的链接上加上 replace 即可。原创 2023-12-24 23:46:52 · 1325 阅读 · 0 评论 -
React 路由传参
在上一篇中，我们学习了 React 中使用路由技术，以及如何使用 MyNavLink 去优化使用路由时的代码冗余的情况。这一节我们继续上一篇 React 路由进行一些补充。原创 2023-12-24 23:42:37 · 1197 阅读 · 0 评论 -
React 路由
路由是根据不同的 URL 地址展示不同的内容或页面在 SPA 应用中，大部分页面结果不改变，只改变部分内容的使用前端路由的优缺点优点用户体验好，不需要每次都从服务器全部获取整个 HTML，快速展现给用户缺点SPA 无法记住之前页面滚动的位置，再次回到页面时无法记住滚动的位置使用浏览器的前进和后退键会重新请求，没有合理利用缓存。原创 2023-12-24 23:32:50 · 1194 阅读 · 0 评论 -
企业微信应用开发实践
使用企业微信开放接口和工具资源，为企业提供丰富的应用服务。原创 2022-11-25 22:34:55 · 3293 阅读 · 0 评论 -
手动搭建脚手架将React组件发布至NPM
我们预期的脚手架具有如下功能：开发组件时可以实时预览对组件各种资源进行打包(js/css/图片等)一键打包发布原创 2018-05-11 10:05:49 · 866 阅读 · 4 评论 -
TypeScript在React中的优雅写法
如果运用熟练的话，TS 只是在第一次开发的时候稍微多花一些时间去编写类型，后续维护、重构的时候就会发挥它神奇的作用了，还是非常推荐长期维护的项目使用它的。原创 2022-09-08 16:28:46 · 1181 阅读 · 0 评论 -
如何在React项目中引入TypeScript？
如何在React项目中引入TypeScript？原创 2022-09-07 14:33:58 · 1914 阅读 · 0 评论 -
React中使用window全局变量出现“Property ‘xx‘ does not exist on type ‘Window & typeof globalThis‘.“
解决React中使用window全局变量出现“Property ‘xx‘ does not exist on type ‘Window & typeof globalThis‘.“的问题原创 2022-09-07 14:11:46 · 11548 阅读 · 2 评论 -
Electron集成React和Vue
Electron集成React或者Vue的方式很多，这是灵活性比较大的一种原创 2022-08-23 09:55:29 · 887 阅读 · 0 评论 -
用React实现一个文件管理器
import React, { Component } from 'react'import { Row, Col, Modal, Table, Upload, Button, Breadcrumb, Icon, Progress, message } from 'antd'import http from "libs/http";import "./table.module.css";export default class FileManagerTable extends Component.原创 2021-06-17 23:05:04 · 3309 阅读 · 5 评论 -
React打包中不想要sourceMap，但是在命令里加‘GENERATE_SOURCEMAP=false‘后windows下报错
react打包发生产时速度有点慢，我不想要sourceMap文件，于是在build改了一下脚本命令："build": "GENERATE_SOURCEMAP=false react-app-rewired build"转载 2021-06-04 10:31:59 · 2232 阅读 · 0 评论 -
怎么修改antd默认样式
一、组件中使用className：<Table rowKey="id" loading={store.isFetching} dataSource={data} pagination={false} className="fileManagerTable" scroll={{ y: 600 }}原创 2021-06-02 21:46:07 · 2698 阅读 · 1 评论 -
React路由组件的lazyLoad
1、通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包const Login = lazy(()=>import('@/pages/Login'))2、通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面<Suspense fallback={<h1>loading.....</h1>}> <Switch> ...原创 2021-05-16 22:09:12 · 211 阅读 · 0 评论 -
Mobx的使用方法
一、安装：cnpm install mobx@5.15.4 mobx-react@6.3 -S二、安装支持装饰器的组件：如果没有安装支持装饰器的组件，会报错：Support for the experimental syntax ‘decorators-legacy’ isn’t currently使用以下方式解决：第一步：cnpm install @babel/plugin-proposal-decoratorscnpm install @babel/plugin..原创 2021-05-13 14:38:44 · 552 阅读 · 0 评论 -
函数柯里化
通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。function sum(a){ return b => { return c => { return a+b+c; } }}原创 2021-05-04 14:50:25 · 91 阅读 · 0 评论 -
React组件核心属性之refs
组件内的标签可以通过ref属性来标识自己。它有以下几种使用方式：1、字符串形式的ref：<input ref="input1"/>完整代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&原创 2021-05-04 08:35:51 · 210 阅读 · 3 评论 -
Ant Design3.x文件上传实例
upload.jsx：import React, { Component } from 'react'import { Upload, message, Button, Space} from "antd"const props = { name: 'myFileName', action: '/api/upload', headers: { authorization: 'authorization-text', }, onChange(info) { if原创 2021-04-24 10:26:45 · 656 阅读 · 0 评论 -
ACE Editor在线代码编辑器在React中的使用
ACE 是一个开源的、独立的、基于浏览器的代码编辑器，可以嵌入到任何web页面或JavaScript应用程序中。ACE支持超过60种语言语法高亮，并能够处理代码多达400万行的大型文档。ACE开发团队称，ACE在性能和功能上可以媲美本地代码编辑器（如Sublime Text、TextMate和Vim等）。ACE是Mozilla Skywriter（以前称为Bespin）项目的继任者，并作为Cloud9的主要在线编辑器。以下是它的详细特性：可以对60多种语言进行语法着色(可以导入TextMate/原创 2021-04-24 09:56:48 · 2036 阅读 · 0 评论 -
Ant Design 3.25.0中如何进行表单验证
index.jsx（父组件）：import React from 'react'import { Row, Col, Card, Input, Button, Table, Tag, Modal, message, Tooltip } from 'antd';import moment from 'moment'import axios from 'axios'import 'moment/locale/zh-cn';import "./question.css"import Create原创 2021-04-22 21:41:29 · 381 阅读 · 0 评论 -
React+wangEditor V4富文本编辑器+Node.js实现图片上传
1、安装wangeditor 4.6.15：npm i wangeditor@4.6.15 -S2、editor.jsx：import React, { Component } from 'react'import { Button, Space } from "antd"import E from 'wangeditor'export default class Editor extends Component { state = { content: ""原创 2021-04-17 18:19:09 · 738 阅读 · 0 评论 -
Ant Design RangePicker中如何动态初始化值？
import React from 'react';import { Modal, Form, Input, Button, InputNumber, Select, Checkbox, Radio, DatePicker } from 'antd';import moment from 'moment'import 'moment/locale/zh-cn';import locale from 'antd/es/date-picker/locale/zh_CN';export defaul.原创 2021-04-16 23:17:44 · 1757 阅读 · 0 评论 -
React+Ant design日期组件DatePicker设置结束时间不能小于开始时间
import React, { Component } from 'react'import { DatePicker, Button } from 'antd';import 'moment/locale/zh-cn';import locale from 'antd/es/date-picker/locale/zh_CN';export default class TimelineCom extends Component { state = { startValue:.转载 2021-04-15 22:44:23 · 2142 阅读 · 0 评论 -
Ant Design 4.14.0中穿梭框Transfer的使用
onCheckTaskForm_Name_Hot = () => { this.createTask_formRef.current.validateFields(['name', 'host']).then(data => { console.log('name和host都校验通过！'); }).catch(error => { console.log('name和host没有都校验通过！'); ...原创 2021-03-29 16:38:47 · 1934 阅读 · 0 评论 -
从create-react-app创建项目后，运行npm run eject报错解决方法
create-react-app命令创建一个react项目，运行npm run eject生成配置文件，报了下面的错：NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html√ Are you sure you want to eject? This a原创 2021-03-20 23:02:08 · 751 阅读 · 0 评论 -
React+Ant Design左侧二级导航菜单
package.json：{ "name": "antd-demo", "version": "0.1.0", "private": true, "dependencies": { "@ant-design/icons": "^4.2.1", "@babel/core": "7.9.0", "@svgr/webpack": "4.3.3", "@testing-library/jest-dom": "^4.2.4", "@testing-libr原创 2021-02-02 22:18:09 · 1355 阅读 · 0 评论 -
React+Ant Design 4.4.1登录及路由导航
package.json：{ "name": "antd-demo", "version": "0.1.0", "private": true, "dependencies": { "@ant-design/icons": "^4.2.1", "@babel/core": "7.9.0", "@svgr/webpack": "4.3.3", "@testing-library/jest-dom": "^4.2.4", "@testing-libr原创 2021-02-02 22:10:15 · 574 阅读 · 0 评论 -
Ant Design中普通表单验证
import React from 'react'import { Form, Button, Input, InputNumber, Select, Checkbox, Radio } from 'antd'const { Option } = Select;const { TextArea } = Input;const layout = { labelCol: { span: 8, }, wrapperCol: { span: 16.原创 2021-02-02 22:02:28 · 606 阅读 · 0 评论 -
Ant Design中Tree组件使用（包括异步加载子节点）
import React, { Component } from 'react'import { Tree } from 'antd'const { DirectoryTree } = Tree;export default class tree extends Component { state = { } /** * 树 */ getTreeData = () => { return [ {.原创 2021-02-02 22:00:44 · 5886 阅读 · 0 评论