代码编织梦想

学习React第十七篇:使用React.cloneElement扩展子组件的功能-爱代码爱编程

继编写 了解React.Children实用程序  ### 当需要扩展子组件的功能或属性的时候,可以利用React.cloneElement来创建具有扩展数据或功能的新组件(可以用来修改子组件属性值,复制子组件,添加子组件)。 Clone and return a new React element using element as the start

java中this.的使用-爱代码爱编程

java中this.的使用 现实中,哪都有重名,java这么神奇,咋可能没有呢?但是,好家伙,重名了咋整,本小朋友表示我心中很多问号??????还好还好,最近我发现个宝贝:“this.”,接下来我就简单介绍下this. 直接看例子叭:(注意,第一个是错例,即未用this.的) public class delete {

微前端——乾坤qiankun Demo-爱代码爱编程

微前端——qiankun(乾坤)实例 一、什么是微前端 微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆,拆完后在合! 二、为什么使用微前端 不同团队间开发同一个应用技术栈不同希望每个团队都可以独立开发,独立部署项目中还需要老的应用代码我们可以将一个应用划分成若干个子应用,将子应用打包成一个个的

webpack 3 零基础入门视频教程(14 个视频)-爱代码爱编程

webpack 3 零基础入门视频教程(14 个视频) webpack 3 零基础入门视频教程 #1 - 介绍「03:52」 webpack 3 零基础入门视频教程 #2 - 安装「03:38」 webpack 3 零基础入门视频教程 #3 - 实现 hello world「07:37」 webpack 3 零基础入门视频教程 #4 - webpa

诱人的 react 视频教程-基础篇(14 个视频)-爱代码爱编程

诱人的 react 视频教程-基础篇(14 个视频) 诱人的 react 视频教程 - 基础篇 #1 介绍「07:25」 诱人的 react 视频教程 - 基础篇 #2 create-react-app「04:18」 诱人的 react 视频教程 - 基础篇 #3 第一个组件「07:42」 诱人的 react 视频教程 - 基础篇 #4 多个组件「

react学习笔记-爱代码爱编程

本片笔记是根据jspang的个人博客学习所得 一、准备工作 1.1 脚手架的搭建 npm install -g create-react-app 1.2 第一个react项目 mkdir ReactDemo //创建ReactDemo文件夹 create-react-app demo01 //用脚手架创建React项目 cd de

react基础笔记 model分层-爱代码爱编程

react基础笔记 model分层 1.model分层1.1.使用DVA进行数据分层管理1.1.1.获取model中的数据1.1.2.修改model中的数据1.1.3.在model中请求数据1.1.4.mock模拟请求数据 1.model分层 Page 负责与用户直接打交道:渲染页面、接受用户的操作输入,侧重于展示型交互 性逻辑。Mode

vue2.0 + element-ui 多级导航菜单-爱代码爱编程

自从用饿了么框架重构项目以来,遇到 很多问题,我都有一一记录下来,现在特喜欢这个框架,说实话,如果你是用了vue这个技术栈的话,一定要用饿了么的pc端框架哦,遇到问题的时候在网上百度一下,就能找到解决方案,还有很多社区可以讨论,社区文档都比较成熟,很容易上手~~ 开发相关资料文档: Element U

从 Next.js 看企业级框架的 SSR 支持-爱代码爱编程

关注「前端向后」微信公众号,你将收获一系列「用 ???? 原创」的高质量技术文章,主题包括但不限于前端、Node.js以及服务端技术 一.Next.js 简介 The React Framework for Production 面向生产使用的 React 框架(废话)。提供了好些开箱即用的特性,支持静态渲染/服务端渲染混用、支持

在react项目中封装api接口-爱代码爱编程

安装axios,qs npm i axios qs -S 封装为js文件 1.chenHttp.js import axios from 'axios' import qs from 'qs' const HTTP = axios.create({ baseURL: "这里填的是接口前边的url", withCredentials

react中引入echarts中国地图-爱代码爱编程

1.首先写一个容器div去装地图注意设置div的长和高!! <div className="map" style={{width:"500px";height:"500px"}}></div> 2.安装echarts并引入项目中 import echarts from 'echarts' 3.引入中国地图的json文

H5新增API:scrollToAnchor实现锚点-爱代码爱编程

H5新增API:scrollToAnchor实现锚点 与react搭配使用 与react搭配使用 最近用Ant Design里的锚点时,遇到了不少的坑。干脆自己用H5原生的方法来写,代码与原理如下: <a onClick={() => this.scrollToAnchor(name)}></a> //定

React 超级简单的tab栏切换(react hooks)-爱代码爱编程

“热爱可抵岁月漫长” export default function Demo(){ //设置默认当前选中 const [current, setcurrent] = useState(0); //点击tab栏切换事件 const clickevent = useCallback((item, key) => { setcurr

react中教你如何快速使用reflux进行全局变量管理-爱代码爱编程

前言 就目前网上一些关于react中使用reflux的教程,坑比较多,解释的也不够通俗,代码也非常零碎,结合自己踩过的坑,给大家举个简单易懂的react中使用reflux的基础例子,希望对vue转react或者只接触过react的朋友一点帮助。 安装reflux 我自己采用的是ts + react的开发模式,不管你采用的是js还是ts,我这里不做赘述

react redux-thunk中间件、Chrome扩展插件redux-devtools配合使用,全局使用redux-爱代码爱编程

前言 本文基于 (“react”: “^17.0.1”) 版本 项目搭建请自行百度。 1.插件安装 安装 redux 存储库插件,redux-thunk、react-redux中间件。 yarn 安装 单次安装 yarn add redux --save yarn add redux-thunk --save yarn add react-red

React富文本框插件 —— braft-editor富文本编辑器使用简介与项目实战-爱代码爱编程

前言 —— 由于公司react项目中需要一个富文本框,所以这几天特意在网上找了一个react可以用的富文本框插件,该插件还是比较实用的功能比较多,使用起来也比较简单 插件名:braft-editor富文本编辑器 安装:使用npm安装 npm install braft-editor --save 使用yarn安装 yarn add braft-edi

echarts 柱状图添加背景色/阴影色(react)-爱代码爱编程

barGap : ‘-100%’ 就是一组颜色浅的数据 同时使用tooltip问题跳转echarts tooltip和barGap同时使用 series: [ { type: 'bar', color: 'rgba(240, 246, 253, 0.6)', barWidth: 32,

react + typescript解决TS2339:Property ‘..‘ does not exist on type ‘Readonly<{}>‘错误-爱代码爱编程

说来比较惭愧,已经两个多月没有更新博客了,由于手头上的项目快进入收尾阶段了,一直没有时间与欲望更新博客,前几天boss又下发了一个新的项目,采用taro + react + reflux + typescript + taroUI做一个微信小程序,说多了都是眼泪啊,微信小程序我做过,挺熟的,之前用DCloud的HbuildX + uni-app做的vue微

【react】hook中useState设置数据不能立即反映更改-爱代码爱编程

问题: 在业务代码中使用useState时发现,当我把一个修改后当数据set进state里面后,再次打印state中那个数据是初始状态的值,并未发生改变 const [list, setList] = useState([]); // 下面在某个方法里面调用 console.log(list); // [] setList([1,2,3]); con

echarts tooltip和barGap同时使用-爱代码爱编程

因为barGap的原理就是造了一组假数据当背景,所以会默认展示优先的数据 这里有一个坑就是背景的数据给多少合适,根据需要自行封装最高值 关键代码 ⬇️ const option = { tooltip: { trigger: 'axis', formatter: params => { r