- 博客(21)
- 资源 (2)
- 收藏
- 关注
RSS订阅转载 css还可以这么写？
作为一个前端，毫无疑问css肯定是最基础的一项技能之一。css是一个标记语言，没有编程语言的诸多特性，比如变量定义，复用，嵌套等，所以相应的开发效率也受到限制。在追求效率和自动化的当下，涌现了一批解决方案，像是css预编译语言Less, Sass等，解决css命名冲突的css-modules，react中css的最佳实践styled-components等。本篇文章不在于探讨css的技巧学习，...
2020-01-16 14:58:22
362
转载 less开发常用知识点归纳
一： 变量1.1 变量概述：变量通过为你提供在同一个地方管理这些值的方法让你的代码变得更容易维护：// 变量@link-color: #428bca; // sea blue@link-color-hover: darken(@link-color, 10%);// 用法a,.link { color: @link-color;}a:hover { ...
2020-01-16 14:48:31
489
转载 配置React项目 及 LESS 或 SASS 的引入
0、安装 node.js1、创建一个react-app 建议采用官网方式：https://reactjs.org/docs/crea...npx create-react-app my-appcd my-appnpm start2、暴露webpacknpm run eject3、下载 LESS 或者 SASS （采用下面一种方式即可）npm install les...
2020-01-15 18:09:48
297
转载 使用从create-react-app创建项目后，运行npm run eject报错解决方法
使用create-react-app命令创建一个react项目，运行npm run eject生成配置文件，报了下面的错：Remove untracked files, stash or commit any changes, and try again.npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! test@0.1.0 eje...
2020-01-15 16:52:10
231
转载 npx 使用教程
npm 从5.2版开始，增加了 npx 命令。它有很多用处，本文介绍该命令的主要使用场景。Node 自带 npm 模块，所以可以直接使用 npx 命令。万一不能用，就要手动安装一下。$ npm install -g npx调用项目安装的模块npx 想要解决的主要问题，就是调用项目内部安装的模块。比如，项目内部安装了测试工具Mocha。$ npm insta...
2020-01-15 15:26:09
277
转载 D3js入门 --- 柱状图的制作
D3js官网：https://d3js.org/最近在研究D3js，索性总结一些文档出来，来总结一周以来的学习心得。D3js官网全英文，相对于Echarts官网详细的文档，英文不好的同学，学起来可能要费劲些，不过有伙伴有中文翻译版的，附上链接：https://github.com/d3/d3/wiki/CN-HomeD3Js是什么D3.js 是基于数据驱动文档工作方式的一款JavaS...
2020-01-15 14:27:41
517
转载 React中的this.props.children
1、this.props对象的属性与组件的属性是一一对应的，但是有一个例外就是this.props.children属性，它表示组件的所有子节点：var NotesList = React.createClass({ render: function() { return ( <ol> { ...
2020-01-14 15:11:37
112
转载 react router4.0实现登录拦截
核心代码（如下），其实理解了核心思想很简单，刚开始被官方示例一大堆代码给蒙蔽了，哈哈。const PrivateRoute = ({component:Component,...rest}) => { return ( <Route {...rest} render={props => window.localStorage.getI...
2020-01-13 18:15:53
564
转载 react-router-dom实现全局路由登陆拦截
相比与vue的路由集中式管理，能够很好的进行统一的路由操作，react的路由看起来更乱，想要进行像vue的全局路由管理不是那么得心应手。在我们的项目中，有很多页面是需要登陆权限验证的，最好的方式就是能够统一管理，而不是每个页面都要单独处理，下面是我的实现方法： 首先我们建一个文件routerMap.js用来存储所有的路由信息，定义需要登陆拦截的页面(auth)：//routerMap....
2020-01-13 17:55:15
1057
转载 react 使用ant design UI 父组件this.refs无法调用子组件自定的方法
子组件使用了 Form.create()如何让父组件调用子组件的方法在写react技术栈使用ant design时Form的使用会带来一个问题，会导致你无法直接使用refs去调用使用Form的子组件自定义方法。当你调用时会抛出异常。子组件写有Form表单父组件使用this.refs.refName.mychild是获取不到该方法的，要用wrappedComponentRef。父组件...
2020-01-13 11:15:27
1110
转载 React ref的用法
React的ref有3种用法：1. 字符串(已废弃)2. 回调函数3. React.createRef() （React16.3提供）1. 字符串最早的ref用法。1.dom节点上使用，通过this.refs[refName]来引用真实的dom节点<input ref="inputRef" /> //this.refs['inputRef']来访问2.类组...
2020-01-11 15:02:10
1330
转载 未来版本react 17新增的生命周期
一、废除的生命周期 官网文档指出使用这些生命周期的代码会在未来版本的react中更容易产生bug，尤其是对于异步渲染的版本 由于未来采用异步渲染机制，所以即将在17版本中去掉的生命周期钩子函数 componentWillMount componentWillRecieveProps componentWIllUpdate二、新增的生命周期 ...
2020-01-07 13:58:11
678
转载 bind 用法及简单实现原理
前言bind 和 call/apply 一样，都是用来改变上下文 this 指向的，不同的是，call/apply 是直接使用在函数上，而 bind 绑定 this 后返回一个函数（闭包），如下：var obj = { init: 1, add: function(a, b) { return a + b + this.init; }}obj.a...
2020-01-06 15:50:24
449
转载 React点击事件的bind(this)传参问题 (推荐阅读)
本博客详细介绍React点击事件的参数传输问题。最近开始使用一些react开发，作为一个初学者还是有点头疼的。碰到一个问题就是，点击事件如何传参？（一）问题描述先来看一下问题的描述吧。如下图：那么我该怎么解决这个问题呢？（二）需要用到的知识愚蠢的自己尝试了很多种愚蠢的方法。废话就不多说，具体看看代码吧。//这是html的结构样式//clickFunction--点...
2020-01-06 15:41:40
419
转载 React事件处理函数必须使用bind(this)的原因 ----（推荐阅读）
1.JavaScript自身特性说明如果传递一个函数名给一个变量，之后通过函数名()的方式进行调用，在方法内部如果使用this则this的指向会丢失。示例代码：首先我们创建test对象并直接调用方法 ：const test = { name:'jack', getName:function(){ console.log(this.name) }...
2020-01-06 14:54:39
210
转载 NPM install -save 和 -save-dev 傻傻分不清
本文原文地址：https://www.limitcode.com/detail/59a15b1a69e95702e0780249.html回顾 npm install 命令最近在写Node程序的时候，突然对 npm install 的-save和-save-dev 这两个参数的使用比较混乱。其实博主在这之前对这两个参数的理解也是模糊的，各种查资料和实践后对它们之间的异同点略有理解。遂写下这...
2020-01-03 14:34:40
90
转载 学习React中ref的两个demo示例
为了摆脱繁琐的Dom操作, React提倡组件化, 组件内部用数据来驱动视图的方式,来实现各种复杂的业务逻辑 ,然而,当我们为原始Dom绑定事件的时候, 还需要通过组件获取原始的Dom, 而React也提供了ref为我们解决这个问题.为什么不能从组件直接获取Dom?组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文...
2020-01-02 18:39:29
203
转载 简单教你React父子组件间平级组件间传值
1.父组件对子组件传值利用props属性传值class Component extends React.Component { constructor (props) { super(props); } render() { return ( <div> <h1>I am {t...
2020-01-02 18:30:10
99
转载 ES6新增rest的用法
arguments类似Array但是并不是Array而rest就是一个Array用rest替代atgumentseg：给数组排序 1 2 3 4 5 6 7 8 9 10 //arguments变量的写法: functionsortFunc(){ ...
2020-01-02 17:18:45
358
转载 react+antd系列之引入echart图表
要在antd中引入echart图表，首先得安装echart包，命令如下：cnpm install echarts --saveechart安装完毕，要如何使用呢，在react中我们要引入我们刚刚安装的echart，如下：import echarts from 'echarts/lib/echarts';但是这里引入这个还不止，假设你要画柱状图，则你得引入：import 'e...
2020-01-02 17:16:50
836
转载 react16中ref的使用
在 React16 新版本中，新引入了 React.createRef 与 React.forwardRef 两个 API，有计划移除老的 string ref，使 ref 的使用更加便捷与明确。如果你的应用已经升级到 React16.3+ 版本，那就放心大胆使用 React.createRef 吧，如果暂时没有的话，建议使用 callback ref 来代替 string ref。strin...
2020-01-02 17:15:19
266
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人