react 前端
列举工作中经常使用到的案例
liuyunshengsir
全栈工程师
展开
-
antd 如何根据条件table的行变颜色
在Ant Design的Table组件中,可以通过rowClassName属性来实现根据条件改变行的颜色。rowClassName属性接收一个函数,该函数接收当前行数据作为参数,返回一个字符串数组,字符串数组中的每个字符串将作为一行的class名。在这个例子中,我们根据reply_count字段的值来决定行的颜色。最高的reply_count值设置为黄色,最小的reply_count值设置为绿色,其他情况不设置颜色。你可以根据自己的需求来调整条件和颜色。例如,你可以根据某个字段的值来决定行的颜色。原创 2024-01-29 22:00:00 · 537 阅读 · 0 评论 -
setState 函数的接收的参数
在 React 中,setState这种形式的setState接受一个对象作为参数,对象中包含要更新的状态的键值对。React 会将这个新的状态合并到当前的状态中。这种形式的setState接受一个函数作为参数,函数的参数是当前的状态(prevState),返回值是包含要更新的状态的对象。React 会使用这个函数返回的对象来更新状态。在函数形式中,使用函数的形式可以确保你基于当前的状态进行更新,避免因为异步更新而导致的问题。React 会确保在多次调用setState的时候,这些更新是按顺序进行的。原创 2023-12-16 21:45:00 · 445 阅读 · 0 评论 -
掘金的动态狗头头像设置方法
浏览期f12执行代码。原创 2023-12-01 19:00:00 · 552 阅读 · 0 评论 -
JS原生导出CSV文件
【代码】JS原生导出CSV文件。原创 2023-09-16 11:46:26 · 226 阅读 · 0 评论 -
react useEffect 防抖的例子
例如我们要实现一个搜索框的功能。文字输入过程中会自动发起搜索请求。为了防止请求发送过于频繁,在高频输入时,不发送接口请求,如果超过了 500ms 下一次输入事件还没有发生,那么就自动请求一次。实现代码如下如果改成 定时任务则可以改成setInterval。原创 2023-03-17 23:45:00 · 141 阅读 · 0 评论 -
useEffect的使用
【代码】useEffect的使用。原创 2023-02-24 20:35:36 · 54 阅读 · 0 评论 -
useRoutes() may be used only in the context of a <Router> component.
【代码】useRoutes() may be used only in the context of a <Router> component.原创 2022-12-10 11:01:24 · 308 阅读 · 0 评论 -
react-tsparticles 生成动态特效背景
react-tsparticles 生成动态特效背景原创 2022-12-08 20:50:20 · 636 阅读 · 0 评论 -
JavaScript 然后遍历dom时报错 forEach is not a function
2. 解决办法:加上一行代码 list = Array.from(list);Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。 将类数组对象转换为真正数组原创 2022-12-05 16:54:29 · 880 阅读 · 0 评论 -
前端展示日志组件ansi-to-react
【代码】前端展示日志组件ansi-to-react。原创 2022-10-29 09:53:50 · 1426 阅读 · 0 评论 -
Nginx配置WebSocket 【支持wss与ws连接】
1、wss协议实际是websocket+SSL,就是在websocket协议上加入SSL层,类似https(http+SSL)。2、利用nginx代理wss【通讯原理及流程】(1)、客户端发起wss连接连到nginx(2)、nginx将wss协议的数据转换成ws协议数据并转发到Workerman的websocket协议端口(3)、Workerman收到数据后做业务逻辑处理(4)、Workerman给客户端发送消息时,则是相反的过程,数据经过nginx/转换成wss协议然后发给客户端。原创 2022-09-24 14:42:26 · 4018 阅读 · 0 评论 -
react 轮询
例子 componentDidMount() { this.dataPolling = setInterval( () => { this.getAITraining(); }, 3000); } componentWillUnmount() { clearInterval(this.dataPolling); } getAITraining=()=>{ console.log('轮询测试 '原创 2020-07-20 16:31:34 · 4191 阅读 · 3 评论 -
Chrome开发者工具调试技巧
1.主要功能有什么?元素面板——通过操作DOM和CSS调整和检查页面;控制台面板——记录诊断信息、作为 shell 在页面上与JS交互;源码面板——设置断点来调试 JS、连接本地文件实时编辑;网络面板——查看请求和下载的资源文件来优化网页加载性能;性能面板——记录和查看网站生命周期内发生的各种事件;内存面板——生成内存使用快照,分析页面占用内容情况;应用面板——检查加载IndexedDB 、 Web SQL 数据库、本地和会话存储、cookie 、应用程序缓存、图片样式资源等等;安全面板—原创 2020-07-07 10:18:43 · 1881 阅读 · 0 评论 -
掌握 JavaScript 关键词 -- this
掌握 JavaScript 关键词 -- this---原文地址:https://www.thecodingdelight.com/javascript-this/#ftoc-heading-2要说 JavaScript 这门语言最容易让人困惑的知识点,this关键词肯定算一个。JavaScript 语言面世多年,一直在进化完善,现在在服务器上还可以通过 node.js 来跑 JavaScript。显然,这门语言还会活很久。所以说,我一直相信,如果你是一个 JavaScript 开发者或者说 .原创 2020-06-19 15:01:46 · 296 阅读 · 0 评论 -
react集成openlayer并使用百度地图
安装依赖yarn add ol百度组件import React from "react";import "ol/ol.css";import Feature from "ol/Feature";import Map from "ol/Map";import View from "ol/View";import Point from "ol/geom/Point";import { Tile as TileLayer, Vector as VectorLayer } from "ol/la原创 2020-06-10 15:23:15 · 299 阅读 · 0 评论 -
javascript将时间处理成字符串,获取日期的后几天
工具类代码// author:liuyunshengsirexport function dateFtt(fmt,date){ var o = { "M+" : date.getMonth()+1, //月份 "d+" : date.getDate(), //日 "h+" : date.getHours(), //小时 "m+" : date.getMinut原创 2020-06-03 14:21:11 · 355 阅读 · 0 评论 -
React实现div随页面滚动而固定在浏览器顶部
代码export default class FixedHeader extends React.Component { constructor(props) { super(props); this.state = { needFixed: false }; } componentDidMount() { window.addEventListener('scroll', this.handleScroll); } handleScroll = event原创 2020-06-01 14:25:10 · 2907 阅读 · 2 评论 -
react 鼠标放上去显示更多文字的卡片
jsx代码import React from 'react';import styles from './MyCard.less';export default class MyCard extends React.Component { constructor(props) { super(props); this.state = { hover: false }; } handleMouseEnter = () => { this.setState({原创 2020-05-30 15:49:01 · 1253 阅读 · 0 评论 -
使用Typescript开发react最佳实践(1)
组件Demo1.将props直接拆解内层直接使用import React from 'react';interface Props { from: string; message: string;}const Demo: React.FC<Props> = ({ from, message }) => { return ( <div> <p>来自{from}的消息</p> <p>{m原创 2020-05-27 17:37:14 · 456 阅读 · 0 评论 -
css 绘制小圆点
1.直接上代码<html><head><style type="text/css">.dot { position: absolute; top: 50%; margin-left: -5px; margin-top: -5px; width: 10px; height: 10px; border-radius: 100%; background: #ffff; box-shadow: 0 2px 4px 0 rgba(0,原创 2020-05-22 11:25:07 · 4274 阅读 · 0 评论 -
百度地图 实现marker的点聚合
1.代码样例需要引入依赖的js <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <script type="text/javascript" src="//api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script> &原创 2020-05-20 15:47:18 · 2571 阅读 · 0 评论 -
百度地图修改marker图标颜色
1.百度的marker图标http://api.map.baidu.com/img/markers.png2.代码控制显示marker的图片var map = new BMap.Map("map"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.N原创 2020-05-19 10:52:59 · 12853 阅读 · 0 评论 -
that=this的妙用
遇到坑的介绍react 调用百度地图的坑:https://blog.csdn.net/liuyunshengsir/article/details/105856382我在调用百度地图时,打算点击mark时,触发操作组件的其他函数,但是提示函数无法找到import React, {Component} from 'react';import styles from './index.less'import {connect} from "dva";@connect(({ apdistri原创 2020-05-08 17:53:44 · 1502 阅读 · 0 评论 -
react 调用百度地图的坑
1.引入百度地图我使用的antd pro 的框架进行的开发,所以只需要在src/pages/document.ejs加入以下代码即可<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=Imejyag6D5IPg4lOfu0LiDUWBGh2SNmc"></script>...原创 2020-04-30 11:11:00 · 1523 阅读 · 0 评论 -
windows系统下,运行 create-umi 报错“文件名、目录名或卷标语法不正确”
1.报错情况E:\lys\createUmi>yarn create umiyarn create v1.19.2[1/4] Resolving packages...[2/4] Fetching packages...[3/4] Linking dependencies...[4/4] Building fresh packages...success Installed ...原创 2020-04-27 13:45:29 · 1370 阅读 · 2 评论 -
antd pro中mock处理带有参数的请求
react 在antd pro中mock处理带有参数的请求const getTest = (req, res) =>{ const {groupCategory} = req.query; // 此处打印的日志在浏览器看不到,并且也并不能在浏览器debuger,为什么呢?善于思考的留言讨论交流 console.log(groupCategory); if(groupC...原创 2020-04-08 11:40:55 · 1011 阅读 · 0 评论 -
react antd 中table列中内容过长的解决方式
直接上代码 const jobColumns = [ { title: '单位名称', dataIndex: 'jsdw', key: 'jsdw', // 解决方案一:使用原生的html // render: val => <span title={val}>{val.substring...原创 2020-03-10 11:21:11 · 6747 阅读 · 2 评论 -
javascript生成uuid
代码function getUUID() { var s = []; var hexDigits = "0123456789abcdef"; for (var i = 0; i < 36; i++) { s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)...原创 2020-03-05 14:07:13 · 652 阅读 · 0 评论 -
react数据请求样例
页面 this.props.dispatch({ type: 'achievement/getScoreHistoryByXh', payload:{xh:getCurrentUser().username} })model* avgScoreHistoryByXh({ payload }, { call, put }) { const re...原创 2020-02-28 19:43:03 · 609 阅读 · 0 评论 -
react 集成使用百度地图生成热力图
1.引入百度地图我使用的antd pro 的框架进行的开发,所以只需要在src/pages/document.ejs加入以下代码即可<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=Imejyag6D5IPg4lOfu0LiDUWBGh2SNmc"></script>...原创 2020-01-18 13:57:43 · 1279 阅读 · 0 评论 -
Intellij idea设置支持TypeScript
1.查看本地是否安装typeScripttsc -version如果没有显示版本,则证明没有安装typeScript2.安装typeScriptnpm install -g typescript注意,需要先安装nodejs3.打开idea,依次找到如下界面确定即可...原创 2019-06-15 17:20:54 · 8829 阅读 · 0 评论 -
npm与yarn 的比较
1、初始化一个新的项目yarn init2、添加一个依赖包yarn add [package]yarn add [package]@[version]yarn add [package]@[tag]3、安装所有的依赖包yarn 或者 yarn install4、npm 与 yarn命令比较NPMYARN说明npm inityarn init初始化某个项...原创 2019-08-04 07:48:55 · 504 阅读 · 0 评论 -
react 设置div的背景
关键前端代码import deskBg from '../../assets/image/desk_bg.png'; <div style={{width: '100%', height: '100%', textAlign: 'center',background:`url("${deskBg}") center center / cover no-repeat` }}>刘云生...原创 2019-04-12 11:46:16 · 3573 阅读 · 0 评论 -
antd 封装request.ts
request.ts/** * request 网络请求工具 * 更详细的 api 文档: https://github.com/umijs/umi-request */import { extend } from 'umi-request';import { notification } from 'antd';import globalConstant from '@/page...原创 2019-10-05 11:11:50 · 4617 阅读 · 0 评论