经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 React
JS中使用react-tooltip插件实现鼠标悬浮显示框

JS中使用react-tooltip插件实现鼠标悬浮显示框

前段时间遇到的一个需求,要求鼠标悬停显示使用描述, 用到了react-tooltip插件,今天写一个总结 先看效果(为了方便参考,用的是原始样式): 文档参考地址: https: www.npmjs.com/package/react-tooltip 1, 首先在配置文件加上...[2019/5/16]

你再也不用使用Redux、Mobx、Flux 等状态管理了

你再也不用使用Redux、Mobx、Flux 等状态管理了

Unstated Next readme 的中文翻译 前言 这个库的作者希望使用 React 内置 API ,直接实现状态管理的功能。看完这个库的说明后,没有想到代码可以这个玩。短短几行代码,仅仅使用 React Hooks ,就实现了状态管理的功能。 看完之后,第一想法就是翻译...[2019/5/9]

使用React手写一个对话框或模态框的方法示例

打算用React写对话框已经很长一段时间,现在是时候兑现承诺了。实际上,写起来相当简单。 核心在于使用React的接口React.createPortal(element, domContainer)。该接口将element渲染后的DOM节点嵌入domContainer(通常是document...[2019/4/25]

react this的作用域问题,麻烦大佬们帮我解决一下

react this的作用域问题,麻烦大佬们帮我解决一下

element里面有个Table组件,我想在编辑和删除那里加上点击事件,但是发现点击方法没有效果 这里面的this看起来好像只针对这个作用域里面的,这里没有办法设置状态,也不能调用方法 设置状态会出现以下的错误,是那个return里面不能写吗?求大佬教我一下 &...[2019/4/24]

React 中无用但可以装逼的知识

最近看了Dan Abramov的一些博客,学到了一些React的一些有趣的知识。决定结合自己的理解总结下。这些内容可能对你实际开发并没有什么帮助,不过这可以让你了解到更多React底层实现的内容以及为什么要怎样实现。可以让你跟别人有更多的谈资,当然,也可以在某些场合装一下逼。那么接下来直接进入正文...[2019/4/16]

PowerBuilder编程新思维5:包装(界面美化与WebUI+React)

PowerBuilder编程新思维5:包装(界面美化与WebUI+React) 前一节,分析了三种界面美化方案,都是控件级的美化。今天再来分析一下窗口级的美化。上一次讲的DirectUI,大家反响一般,效果和创新都不足。那是没有讲完的原故。今天……还是没有讲完,不过效果应该还行吧:)。 &nbs...[2019/4/15]

面试题:react和vue的区别分析

react和vue是什么?有啥区别吗? 三大框架之二,大家应该都不会陌生,都有学习过或者开发中使用。 但是他们到底有啥区别呢?这个就是我们这篇文章所需探讨并学习的。 开始! MVC 和 MVVM 首先,来说明下这些字母代表的含义 M:Model 模型 V:Vie...[2019/4/8]

详解在React项目中安装并使用Less(用法总结)

le 的安装配置 安装react-app-rewired,react-app-rewire-le ,babel-plugin-import插件 执行命令: npm install react-app-rewired --save-dev npm install react-a...[2019/3/19]

详解React项目中碰到的IE问题

最近接手一个React项目,在IE下碰到了俩问题 IE11报错如下: 跟踪一下之后,发现是一些其他的npm包里面用到了startsWith这个方法,可以自己polyfill一下: if (!String.prototype.startsWith) { String...[2019/3/15]

详解使用React制作一个模态框

模态框是一个常见的组件,下面让我们使用 React 实现一个现代化的模态框吧。 组件设计 模态框想必大家都很熟悉,是工作中常用的组件,可以让我们填写或展示一些信息而不必打开一个新页面。在开始编码之前,我们先来了解一个 React 模态框组件应该如何设计。 React 是一个状态(数据)驱动的...[2019/3/14]

React中this丢失的四种解决方法

发现问题 我们在给一个dom元素绑定方法的时候,例如: <input type="text" ref="myinput" accept = "image/*" onChange = {this.selectFile} /> React组件中不能获取refs的...[2019/3/13]

React create-react-app Build fails after eject: Cannot find module &#39;@babel/plugin-transform-react-jsx&#39;

运行 npm run eject 出现报错 Build fails after eject: Cannot find module ''@babel/plugin-transform-react-jsx'' 解决方法 1.删除 node_modules 文...[2019/3/12]

记录一次完整的react hooks实践

记录一次完整的react hooks实践

写在前面 React在16.8版本正式发布了Hooks。关注了很久,最近正好有一个小需求,赶紧来试一下。 需求描述 需求很简单,部门内部的一个数据查询小工具。大致长成下面这样: 用户首次访问页面,会拉取数据展示。输入筛选条件,点击查询后,会再次拉取数据在前端展示。 ...[2019/3/12]

30分钟精通React今年最劲爆的新特性——React Hooks

你还在为该使用无状态组件(Function)还是有状态组件(Cla )而烦恼吗? ——拥有了hooks,你再也不需要写Cla 了,你的所有组件都将是Function。 你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗? ——拥有了Hooks,生命周期钩子函数可以先丢一边了。 你在还在...[2019/3/12]

深入理解react 组件类型及使用场景

函数组件 vs 类组件 函数组件(Functional Component )和类组件(Cla Component),划分依据是根据组件的定义方式。函数组件使用函数定义组件,类组件使用ES6 cla 定义组件 函数组件 function Welcome(props)...[2019/3/8]

React性能优化系列之减少props改变的实现方法

React性能优化的一个核心点就是减少render的次数。如果你的组件没有做过特殊的处理(SCU -- shouldComponentUpdate或使用PureComponent),那每次父组件render时,子组件就会跟着一起被重新渲染。通常一个复杂的子组件都会进行一些优化,比如:SCU 使用P...[2019/1/18]

在Create React App中使用CSS Modules的方法示例

前提条件 请先进行全局安装 create-react-app 插件哈,安装命令:npm install create-react-app -g 先使用 create-react-app 命令下载一个脚手架工程,安装命令: # 使用 npx $ npx create-react...[2019/1/16]

关于React动态加载路由处理的相关问题

前言 相信很多人都遇到过想在React项目中动态加载路由这种问题,接下来我们逐步实现。 引入必要的依赖 import React from ''react'' import { Router, Route, IndexRoute, hashHistory } fr...[2019/1/8]

深入解析React中的元素、组件、实例和节点

React 深入系列,深入讲解了React中的重点概念、特性和模式等,旨在帮助大家加深对React的理解,以及在项目中更加灵活地使用React。 React 中的元素、组件、实例和节点,是React中关系密切的4个概念,也是很容易让React 初学者迷惑的4个概念。现在,我就来详细地介绍这4个概念...[2018/12/17]

React事件处理的机制及原理

React中的事件处理 在React元素中绑定事件有两点需要注意: (1)在React中,事件命名采用驼峰命名方式,而不是DOM元素中的小写字母命名方式。例如onclick要写成onClick,onchange要写成onChange等。 (2)处理事件的响应函数要以对象的形式赋值给事...[2018/12/3]

如何去除富文本中的html标签及vue、react、微信小程序中的过滤器

在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容;然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除html标签及 空格 let richText = '' <p style="...[2018/11/22]

React SSR样式及SEO的实践

前一篇主要记录了一下SSR配置以及结合Redux的使用。这里简单说一下React SSR中样式处理和更优雅的SEO SSR样式 在React客户端渲染,添加样式很容易。写一个c 样式文件,在对应组件中引用。标签上通过cla Name这个属性调用对应样式就万事Ok了。当然我们需要在web...[2018/10/24]

自定义react数据验证组件

  我们在做前端表单提交时,经常会遇到要对表单中的数据进行校验的问题。如果用户提交的数据不合法,例如格式不正确、非数字类型、超过最大长度、是否必填项、最大值和最小值等等,我们需要在相应的地方给出提示信息。如果用户修正了数据,我们还要将提示信息隐藏起来。   有一些现成的插件可以让你非常方便地实现这...[2018/10/19]

The Road to learn React书籍学习笔记(第二章)

  The Road to learn React书籍学习笔记(第二章)组件的内部状态 组件的内部状态也称为局部状态,允许保存、修改和删除在组件内部的属性,使用ES6类组件可以在构造函数中初始化组件的状态。构造函数只会在组件初始化的时候调用一次 类构造函数 1 cla &nb...[2018/10/16]

295
2
记录数:24 页数:1/11
加载更多