![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 73
困知勉行1985
学而时习之,不亦说乎
展开
-
React中设置样式style
1.设置行内样式:1.基本设置:使用{},传入一个对象{padding:'2px05px20px',overflowY:'auto'}如下所示:<div style={{padding: '2px 0 5px 20px',overflowY: 'auto'}}2.设置百分比(相对数据)<div style={{width: 'calc(100% - 35px)',height: getWinHeight(200)}}>3.通过函数设置:例如,自...原创 2021-10-20 20:12:30 · 12448 阅读 · 0 评论 -
React中overflow: auto 失效的问题解决
内容已经溢出了屏幕,但是滚动条还是不出现,这个问题让人很不爽呢先看下面内容,将JsonEditor组建渲染到元素<divid="jsoneditor"className="jsoneditor-react-container"/>1.html内容:<div style={{padding: '2px 0 5px 20px',overflowY: 'auto', width: 'calc(100% - 35px)',height:'calc(100% - 15px)'}}...原创 2021-10-20 19:46:53 · 1475 阅读 · 0 评论 -
React 组件Update重新渲染优化
目录1.无用的渲染2.类组件Update优化 -- shouldComponentUpdate生命周期函数3.类组件Update优化 -- 继承PureComponent组件4.函数组件Update优化 -- React.memo()原文链接:Improving Performance in React Functional Component using React.memo原文作者:Chidume Nnamdi译者:进击的大葱推荐理由: 本文讲述了开发React应用时如何...转载 2021-09-10 10:33:50 · 1925 阅读 · 0 评论 -
webdriverio(Selenium)前端自动化测试概述
1.webdriverio 与 Selenium的关系:简单来说就是selenium是最早出现的前端测试框架,但是因为是基于js的,所有受到浏览器安全限制,有些功能受限,后来就诞生了webdriverio这个新的框架,WebDriver直接利用了浏览器的内部接口来操作浏览器,而不是基于js。它整合并且逐渐替代了selenium。我们把Selenium当做一套API,需要用户自己创建自动化框架的所有部分。WebdriverIO则提供了一个完整的框架。它不需要你像Selenium一样从头开始实现一堆东.原创 2021-09-03 10:58:09 · 1747 阅读 · 0 评论 -
React路由跳转与传参
路由跳转功能由React Router提供,需要先理解history,history是为React Router提供核心功能的包,能轻松地在客户端为项目添加基于location的导航,这种功能对于单页应用至关重要。安装依赖:npm install --save history存在三类history,分别是browser,hash,与 memory。history包提供每种history的创建方法。1.首先定义history:无论创建哪种history,最终都会得到一个几乎拥有相同属性原创 2021-08-20 14:53:30 · 2083 阅读 · 0 评论 -
React导入json数据
本文提供两种方式,读者根据自己的需要进行选择。1.第一种方式:直接import json文件。这种方式依赖于 json-loader模块(npm install json-loader, https://www.npmjs.com/package/json-loader),如果工程是使用create-react-app构建的,那么该模块已经包含在内。import jsondata from './hierachy.json';console.log(data);2.第二种方式:将j.原创 2021-08-20 14:34:13 · 4211 阅读 · 0 评论 -
Selenium前端自动化测试框架 简介与使用
1.概述:Selenium是一个浏览器自动化库。Selenium最常用于测试web应用程序,可以用于任何需要与浏览器自动交互的任务。自动化测试的脚本可以使用Python,java,js等,需要根据各自公司自己的需要来选择,如果公司开发人员对于java比较熟悉,则选择java,测试人员有时候并不熟悉脚本编程语言,这时候开发人员可以进行一定的帮助。本文中的安装和使用环境是windows10.2.安装Selenium及相关组件:2.1 安装Selenium:使用npm进行安装npm in原创 2021-08-09 11:14:50 · 1971 阅读 · 0 评论 -
前端自动化测试详解
这篇文章主要向大家介绍前端自动化测试详解,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。1 前言文章研究了四个问题:什么是自动化测试、为何要自动化测试、什么项目适合自动化测试、自动化测试具体要怎么作。在寻找这四个问题答案的过程当中,梳理了一套完整的前端自动化测试方案,包括:单元测试、接口测试、功能测试、基准测试。2 什么是自动化测试维基百科是这样定义的html在软件测试中,测试自动化(英语:Test automation)是一种测试方法,使用特定的软件,去控制测试转载 2021-08-06 16:05:15 · 4095 阅读 · 0 评论 -
React生命周期
React 组件的生命周期函数是我们在开发过程中经常用到的,是必须掌握的基础知识,如果有不熟悉的可以看官方文档,简单总结如下:组件的生命周期函数分为两类:挂载或卸载过程 / 组件更新时。1.挂载或卸载过程涉及到三个函数,这些函数都只会在组件初始化或者卸载时运行一次。componentWillMount - 组件即将挂载 componentDidMount - 组件挂载完成 componentWillUnmount - 组件即将卸载2.组件更新时涉及到四个函数:componentWillR原创 2021-08-05 11:08:15 · 104 阅读 · 0 评论 -
React useState() 使用指南
1.使用 useState() 进行状态管理useState()是改变状态的开关,将状态添加到函数组件需要4个步骤:启用状态、初始化、读取和更新。1.1 启用状态要将<Bulbs> 转换为有状态组件,需要告诉 React:从'react'包中导入useState钩子,然后在组件函数的顶部调用useState()。import React, { useState } from 'react';function Bulbs() { ... = useState(...);转载 2021-08-04 11:11:25 · 2975 阅读 · 0 评论 -
如何使用React.memo()
包装函数React v16.6.0出了一些新的包装函数(wrapped functions),一种用于函数组件PureComponent / shouldComponentUpdate形式的React.memo()本篇将介绍React.memo()的使用场景React.memo()是一个高阶函数,它与React.PureComponent类似,但是一个函数组件而非一个类。import React from 'react';export default class extends.转载 2021-08-04 10:42:33 · 664 阅读 · 0 评论 -
React 集成jsoneditor后,password格式保护json数据的敏感信息
目录1.集成jsoneditor到React2.修改代码(1).添加Option(2).修改Node.js文件(3).修改util.js文件1.集成jsoneditor到React关于怎样将jsoneditor集成到React中,请参考文章:https://blog.csdn.net/wdquan19851029/article/details/115869264,本文只讲怎样修改jsoneditor源码,使用password格式保护json敏感信息。从github下载源代码原创 2021-04-19 20:33:20 · 970 阅读 · 2 评论 -
React 集成 jsoneditor 以对json数据进行展示和修改
1.jsoneditor库下载地址:JSON编辑器是一个基于web的工具,用于查看、编辑、格式化和验证JSON。它有各种模式,比如树编辑器、代码编辑器和纯文本编辑器。github地址:https://github.com/josdejong/jsoneditor2.下载并编译(1).安装依赖yarn install在安装过程中提示没有安装python2, 所以如果没有安装过python2的请自行查找资料进行安装,这里只对python系统环境变量的配置,进行说明以python2为例进行原创 2021-04-19 17:25:16 · 6766 阅读 · 4 评论 -
Angular或React中使用js下载文件
HTML里面的<a>标签可以用来下载文件,例如:<a href="http://domain:port/file.zip" download="target.zip"> 下载文件 </a>下载文件的时候,我们不可能给每个文件都写死一个anchor标签(<a>),这时候就可以利用js去临时创建一个<a>标签,以完成下载。用js创建一个隐藏的<a>标签 js设置其href属性 js设置其download属性 js触.原创 2020-12-22 09:47:18 · 959 阅读 · 0 评论 -
React中添加图片
在html文件中,引入普通图片只需要这样<img src="../assets/agv/IMG_20180922_091703.jpg" alt="logo"/>但是在React中,这种方式是不允许的,会报错儿。在React中应该怎样添加图片呢?本文总结了三种方式1.通过import引入:推荐使用这种方式import pic1from'../assets/agv/IMG_20180922_091703.jpg';然后在img标签中直接引入这个变量就可以...原创 2020-12-16 14:45:45 · 1284 阅读 · 0 评论