React
文章平均质量分 64
test
麦片加奶不加糖
NUS研究生毕业 目前互联网行业工作
爱好编程 | 机器学习 | 数据分析 | 炒股
展开
-
React好用的markdown编辑类库包 react-markdown-editor-lite
今天给大家介绍一个好用的编辑类第三方库react-markdown-editor-lite 功能强大,使用简单先来看看效果图:1. 使用npm安装包npm installreact-markdown-editor-litenpm installmarkdown-it2. 在程序中引入相关内容import * as React from 'react'import * as ReactDOM from 'react-dom'import MarkdownIt ...原创 2021-03-07 22:47:15 · 2099 阅读 · 1 评论 -
React 组件间通信 Context API 2
旧版的Context API 在和shouldComponentUpdate搭配使用时很容易出问题。在React 16.3版本发布了新的Context API 对使用方法做了大的修改。首先让我们来看看新版 Context API 都由哪几部分组成:1.React.createContext方法用于创建一个 Context 对象。该对象包含Provider和Consumer两个属性,分别为两个 React 组件。2.Provider组件。用在组件树中更外层的位置。它接受一个名为...原创 2020-11-02 16:24:15 · 153 阅读 · 0 评论 -
React 组件间通信 Context API 1
背景当我们在开发过程中,我们可能会遇到这样的需求:某组件需要将值传给它的孙子,甚至嵌套更深的后代组件,我们的实现方式可以是采用props逐层向下传递,直到需要获取到值的组件为止。// 顶层组件 grandParent.jsclass GrandParent extends Component{ render(){ return <Parent text=‘我是一个跨组件变量传递示例’/> }}// 中间层组件 parent.jsclass Pa原创 2020-11-02 14:14:49 · 134 阅读 · 0 评论 -
React 发布-订阅机制实现组件间信息通信 3
在上一篇文章里介绍了PubSubJs的使用,其核心思想是发布-订阅模式。本篇继续介绍React中可以使用此模式的另一个案例 EventEmitter。EventEmitter 的核心就是事件触发与事件监听器功能的封装。EventEmitter 的每个事件由一个事件名和若干个参数组成,事件名是一个字符串,通常表达一定的语义。对于每个事件,EventEmitter 支持若干个事件监听器。当事件触发时,注册到这个事件的事件监听器被依次调用,事件参数作为回调函数参数传递。1. 安装npm insta.原创 2020-10-28 16:37:58 · 304 阅读 · 0 评论 -
React 发布-订阅机制实现组件间信息通信 2
本篇主要是承接上一文对发布-订阅模式,以具体在React中使用案例PubSubJS来理解此原理。PubSubJS官方Github链接:https://github.com/mroderick/PubSubJS1. 安装包npm install pubsub-js2. 在React项目中引入包import PubSub from 'pubsub-js'3. 重点使用的函数发送消息:PubSub.publish(名称,参数)订阅指定消息:PubSub.subscri..原创 2020-10-28 15:53:05 · 180 阅读 · 0 评论 -
React 发布-订阅机制实现组件间信息通信 1
首先我们需要了解下什么是发布-订阅模式?发布-订阅模式,阮一峰在《Javascript 异步编程的 4 种方法》书中写道:我们假定,存在一个"信号中心",某个任务执行完成,就向信号中心"发布"(publish)一个信号,其他任务可以向信号中心"订阅"(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"(publish-subscribe pattern),又称"观察者模式"(observer pattern)。上面是关于 订阅-发布模式的一个抽象的定义原创 2020-10-28 14:16:04 · 569 阅读 · 1 评论 -
React-document-title实现动态更新页面Title
因为react是单页应用,所以可能需要根据不同的路由改变文档的title。我们可以使用react-document-title组件实现,其提供了一种document.title在单页面应用程序中指定的声明方式。首先使用npm install react-document-title 进行安装,然后在文件中引入import DocumentTitle from "react-document-title官方文档提供了以下几种例子:var App = React.createClass...原创 2020-09-29 14:33:41 · 1719 阅读 · 0 评论 -
使用NProgress给页面上方添加进度条
可以借助第三方库NProgress来实现调用接口请求时候,获取数据的动态过程。适用于Vue、React等框架。下面以React举例:1. 首先需要使用npm进行安装npm install nprogress2. 在react文件中引入包和css样式import NProgress from 'nprogress'import 'nprogress/nprogress.css'注意:这里css样式必须引入,不然没有效果3. 在请求之前开启,请求接受之后关闭滚动条..原创 2020-09-29 14:05:37 · 581 阅读 · 0 评论 -
React前端项目打包后启动跨域问题
最近花了一点时间学习React框架,然后自己照着教程写了下前端页面。再学完之后,需要对前端代码进行打包操作:执行 npm run build 。打包项目需要花一点时间,等待两分钟。在打包好之后会出现这样的提示:The build folder is ready to be deployed.You may serve it with a static server: se...原创 2020-05-05 20:52:08 · 3225 阅读 · 0 评论 -
分页搜索前点击页码大于搜索后总页码时,前端显示问题
1.场景介绍:后端处理进行分页操作,前端每次传递pageNum和pageSize参数在使用antd的组建 Table 编写前端界面时,使用了Table中一些关于分页的属性,如下所示: pagination={{ total: total, defaultPageSize: 1, ...原创 2020-03-25 22:33:18 · 714 阅读 · 0 评论