问题如何对组件的children进行加强，如：添加属性、绑定事件，而不是使用<div>{this.props.children}</div>在<div>上进行处理。 前车之鉴今天写组件遇到这个问题，在网上查阅了很多资料，都说可以使用React.cloneElement进行处理，但是结果并不是预期想要的。 先看看这个东西有什么用： React.cloneElement(element, [props], [...childrn])根据React官网的说法，以上代码等价于： <element.type {...element.props} {...props}>{c...
react-router-dom@4.3.0 || react-router@4.4.1 react-router 使用方法配置 router.js import React, { Component } from react; import { Switch, Route } from react-router-dom;const router = [{path: /,exact: true,component:importPath({loader: () => import(/* webpackChunkName:"home" */ "pages/home/index.js"),}),},] const Routers = () => (<main><Switch>{router.map(({component,path,exact},index)=>{return <Ro...
整理 react 组件传值 三种方式 父组件向子组件传值（通过props传值） 子组件：class Children extends Component{constructor(props){super(props);}render(){return(<div>这是：{this.props.name}</div> // 这是 父向子)}} 父组件:class App extends React.Component{render(){return(<div><Children name="父向子"/></div>)}} 父组件向子组件传值（回调函数） 子组件class Children extends Component{constructor(props){super(...
react-router模块化配置因为公司的需要最近踏进了react坑，一直在挖坑填坑，在路由这一块折腾得不行。直接进入主题，配置react-router模块化 1.先下载react-router-domnpm install react-router-dom --save2.在相应的文件引入react-router-dom相应的模块import { BrowserRouter as Router, Route, Link } from "react-router-dom";3.在src子创建一个module目录，接着在module目录在创建一个router.js文件，用来配置路由。//router....
打算用React写对话框已经很长一段时间，现在是时候兑现承诺了。实际上，写起来相当简单。 核心在于使用React的接口React.createPortal(element, domContainer)。该接口将element渲染后的DOM节点嵌入domContainer(通常是document.body)，并保证只嵌入一次。 所以，我们可以这样写一个对话框或模态框： function Dialog() {return React.createPortal( <div>Dialog contents</div>, document.body ) }一个新的div会出现在body内部：一...
发现问题 我们在给一个dom元素绑定方法的时候，例如：<input type="text" ref="myinput" accept = "image/*" onChange = {this.selectFile} />React组件中不能获取refs的值，页面报错提示：Uncaught TypeError: Cannot read property 'refs' of null or undefind 小栗子import React from react; import $ from jquery import ../app.scss;export default class MyForm extends React.Component {submitHandler (event) {event.pre...
项目中通常会使用iconfont作为图标显示的解决方案，这里介绍下如何在项目中配置。 准备工作 首先配置好项目，关键需要注意FontClass/Symbol 前缀和Font Family两个配置。当我们配置好项目之后，就可以导出样式文件，复制如下图中的css链接中的内容备用。正餐开始 创建Icon.js文件。 import React from react; import classNames from classnames; import ./iconfont.less;// 上文中从iconfont中复制的css文件内容 import ./icon.cs...
之前也是写过一篇关于Redux的文章，来简单理解一下Redux,以及该如何使用。今天我就来分享一个也是入门级别的，React+Redux+antd来实现简单的待办事件。同时也讲讲自己对Redux的理解。先来看一张图吧：我们简单的比喻来让我们更加好的理解Redux，我们这样比喻(图书馆借书)： 1.React Component:借书人 2.Action Creators:你要说你要借书这句话，肯定要说话吧，就是一句话：我要借书 3.Store:图书馆管理员 4.Reducer:图书馆管理员肯定...
背景公司的前端项目部署方式比较简单，整个过程基本上是手动的；目标通过工具实现以下几个任务： 编译、部署自动化；选择指定版本进行回滚；区分不同的分支（环境）；技术方案 选用 jenkins 作为部署工具；也便于后续 CI 的接入；使用 docker 进行编译，确保每次编译的环境的稳定；步骤步骤一：搭建 Jenkins搭建 Jenkins 有很多方案，这里选择使用 docker 搭建。 docker-compose.yml 的内容如下： version: 3 services:fejenkins:u...
在React项目中，我们经常会通过redux以及react-redux来存储和管理全局数据。但是通过redux存储全局数据时，会有这么一个问题，如果用户刷新了网页，那么我们通过redux存储的全局数据就会被全部清空，比如登录信息等。 这个时候，我们就会有全局数据持久化存储的需求。首先我们想到的就是localStorage，localStorage是没有时间限制的数据存储，我们可以通过它来实现数据的持久化存储。 但是在我们已经使用redux来管理和存储全局数据...
面对日新月异的前端，我表示快学不动了:joy:。 Webpack 老早就已经更新到了 V4.x，前段时间 React 又推出了 hooks API。刚好春节在家里休假，时间比较空闲，还是赶紧把 React 技术栈这块补上。 网上有很多介绍 hooks 知识点的文章，但都比较零碎，基本只能写一些小 Demo 。还没有比较系统的，全新的基于 hooks 进行搭建实际项目的讲解。所以这里就从开发实际项目的角度，搭建起单页面 Web App 项目的基本脚手架，并基于 hooks API ...
React性能优化的一个核心点就是减少render的次数。如果你的组件没有做过特殊的处理（SCU -- shouldComponentUpdate或使用PureComponent），那每次父组件render时，子组件就会跟着一起被重新渲染。通常一个复杂的子组件都会进行一些优化，比如：SCU 使用PureComponent组件。对于SCU基本上进行的也都是浅比较，深比较的代价太高。 对于这些被优化的子组件，我们要减少一些不必要的props改变：比如事件绑定。对于那些依赖于配置项的组...
前提条件 请先进行全局安装 create-react-app 插件哈，安装命令：npm install create-react-app -g 先使用 create-react-app 命令下载一个脚手架工程，安装命令： # 使用 npx $ npx create-react-app my-app# 使用 npm $ npm init npx create-react-app my-app# 使用 yarn $ yarn create react-app my-app运行项目 $ cd my-app# 使用 npm $ npm start# 或者使用yarn # yarn start在浏览器中输入 http://localhost:3000 查看项目效...
关于创建 create-react-app 项目请查看：create-react-app 的安装与创建 。 关于在 less 和 sass 如何在 create-react-app 启用 CSS Modules，请查看我的上一篇文章： 在 Create React App 中使用 CSS Modules 。 启用 Sass 语法编写 CSScreate-react-app 脚手架中已经添加了 sass-loader 的支持，所以只需要安装 node-sass 插件即可 安装 node-sass 插件$ npm install node-sass --save# 或者 # $ yarn add node-sass用法：编写 s...
说明实现 路由跳转、redux 文件版本 “next”: “^4.2.3”,“react”: “^16.2.0”,“react-dom”: “^16.2.0”Next.js GitHub 文档 项目源码 使用Next.js 使用文件体统作为API，可以自动进行服务器端渲染和代码分割 1. 安装 yarn add next react react-dom2. package.json 中添加 npm script "scripts": {"dev": "next","build": "next build","start": "next start"}, 3. 创建 /pages 文件夹，其中文件会映射为路由/pages 文件夹...