前端
文章平均质量分 55
mlight_月光
这个作者很懒,什么都没留下…
展开
-
【React】context的提供与使用
context 上下文变量的使用这几天困扰了我一下。故此写篇文章整理一下。1、提供者(Provider)表示向下传递数据,在整颗树上的后代节点都能使用。以下<Context.Provider/Consumer >的Context均可以随便取名字比如const TianTianContext = React.createContext(null);<TianTianContext.Provider ><TianTianContext.Consumer >(原创 2021-11-01 17:22:55 · 266 阅读 · 0 评论 -
[React报错集锦]Object are not valid as a React child
如果你是这样的代码function App(){ let view = <Diectory />; return {view}}报以上错误,在return外层添加一个唯一根节点return ( <> {view} </>)原创 2021-11-01 15:26:09 · 216 阅读 · 0 评论 -
【React】从最外面传递一个子组件进去,如何同时获取多个父组件的属性?
记录一下使用React遇到的一些问题和解决办法。假设Father1是一个开发人员不想每次都改变的封装类,要求子级只能以外部的形式插进去。Father1 > Father2 > Father3 > Child1 (Child1是变化的,需要外部定义好传进去)惯常操作是下面:// 原始做法class Father { return ( <Father1> <Child1 /> // 这种方式只能传入Father的属性,不利于使用它的父级传入数原创 2021-11-01 11:16:20 · 301 阅读 · 0 评论 -
npm link使用记录
npm link的文章算是烂大街了,但我在百度的时候仍然感觉直观的感觉觉不够。故此记录一下,不写太复杂。1、使用场景。如果你需要debug项目正在引用的依赖包,而node_module下面调试不起作用时,尝试使用npm link。npm link要求项目node_module里可以有同名的包,但link debug的包必须放在项目外面任意的位置。一个node install packagename的npm包可能不存在完成的源码,只有编译后的js文件。无法直接修改的时候,则使用npm link外部同名原创 2021-10-25 13:22:25 · 810 阅读 · 0 评论 -
npm7 install package can‘t relosve peerDependency的包的解决办法
项目场景:npm7 install package 依赖包与宿主环境冲突,无法can't relosve dependency,npm7会报错,并提供解决方法,但是该解决方法并不能保证正确的依赖关系。问题描述:使用版本7的npm下载一个packageA,发现packageA依赖的某个包和宿主环境的包版本有冲突,此时控制终端输入如下提示:官方提醒我们使用 --force 进行强制下载, --legacy-peer-deps 来忽略下载。如此,npm install 至少保证能下载成功,只是依原创 2021-08-17 17:42:19 · 424 阅读 · 0 评论 -
【前端|node】linux安装切换node版本
项目场景:因为daily build服务器环境加入新项目,使用不同的node版本,尝试以下办法:1、安装nvm,结果:过于麻烦,失败率大;2、下载多个node版本,做路径切换,不适用全局变量,虽然麻烦,但直接可用。问题描述:为了不耽误时间,采用方法2。如有其他方法,后续更新 解决方案:编译过的node版本地址如下,选择系统和架构都合适的版本。https://nodejs.org/dist/案例步骤如下:以下案例,下载版本linux x64 14.17cd /usr/l原创 2021-07-27 12:36:00 · 1569 阅读 · 0 评论 -
await is only valid in async function
async的使用方法简洁如下async function aa(){ await bb();}function bb(){}报错的原因是await 外层进行数组循环时,不能是函数封装形式的foreach(),map()方法,使用for循环,该错误就会消失原创 2021-03-22 17:56:52 · 565 阅读 · 0 评论 -
项目中常用的几个ehcharts小效果
写几个不常用但是最近Uo项目用到了的echart效果主要因为越用越觉得echarts非常的人性化(1)echart 自由间隔显示轴数据下面是整十分显示,但是数据本身按照固定interval是无法做到的。这个方法实在太有用了!使用属性: axis, axisLabel, interval我的项目要求比较简单,以前一直用下列方式分割label的显示interval = number这次满足不了,后来用函数的方式如下,也能顺利完成。不得不说echart的定制选项很人性化了原创 2020-10-21 13:19:41 · 268 阅读 · 0 评论 -
react项目更改访问的端口号
1、配置地址从这个文件找到配置地址 https://bit.ly/CRA-PWA最终地址:端口号:https://create-react-app.dev/docs/advanced-configuration/配置方式:https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env2、开始配置本地环境:window原创 2020-06-08 20:18:09 · 1583 阅读 · 0 评论 -
记录第一次创建react新项目后,按需求修改目录结构到成功访问
最近正在写一个react的小项目练手。先来阐述一下如何自由使用组件加载目录和定义项目入口1、创建项目create-react-app [app-name]cd [app-name]npm run start目录结构大致为如下,红色框为开发者主要会操作到的几个目录。因为自己写项目肯定有不少新的模板和组件文件生成,我们要确定一个自己的目录结构,我暂定按角色类型来分,在基础目录上创建了component目录放组件,src放index.html和index.js,这时App.js就要移到compone原创 2020-06-01 23:34:33 · 571 阅读 · 0 评论 -
记录不通过webpack而直接使用import导入模块,在浏览器上执行es6的语法的过程
最近准备写个react的小项目,文档之前已经看完了,按部就班使用的webpack打包,一切正常。今天脱档写代码之前,突然想起脱离了打包工具,支持es6的浏览又是如何直接执行es6的语法,以及需要哪些工具呢?借此强化对一些js基础的了解与记忆。本人是新手,故本篇记录也只能帮助到新手。目录结构浏览器加载es6的语法使用标签<script typ="module" > </script>这个标签内部不允许有注释的内容先用代码块加载一个模块<!DOCTYPE.原创 2020-05-30 22:48:29 · 1284 阅读 · 0 评论 -
angularjs伴随ng-init等指令产生的作用域
前两天想用ng-init做条件判断的桥梁时出现了一次失败,做了一个测试,发现angular的局部作用域影响ng-init定义的值。ng-init的作用就是创建一个变量(bb)一般情况下,和$scope.bb的作用一样,不同的是,ngInit是指令,有局部作用域,优先级更高。可以理解为在ngInit的作用域 $ngInitScope内又定义了一个 $ngInitScope.bb = $ngInitScope.website1,而且是双向绑定<div ng-init="bb=website1".原创 2020-05-29 19:24:04 · 600 阅读 · 0 评论 -
angularjs ng-transclude学习记录
因为$compile出错,去查了angularjs的官文,看到文末的transclude部分,我没用过这个属性,短短几段话跟做阅读理解似的花了我一个多小时逐字逐句理解以图把逻辑理顺。回头再看看,官文还是不能细读,既有困惑,值得记录。1、ng-transclude有什么用我们通常的自定义属性,在没用transclude之前的简化配置是这样的//directive1 return返回return { restrict:'A', scope:{}, template:dom}在这样的结构下,原创 2020-05-24 19:24:07 · 522 阅读 · 0 评论 -
angularjs+directive+scope:true修改规则对引用类型数据无效,主要受原型链影响
html<div ng-controller="Ctrl"> 父输入框第二层:<input type="text" ng-model="menu['菜单1']['mesWebsite']" /> <div ng-bind="menu['菜单1']['mesWebsite']"></div> <br /> <div website-input></div>原创 2020-05-24 14:13:44 · 242 阅读 · 0 评论 -
http请求的referer属性
转自 http://blog.csdn.net/qlp3643_1/article/details/5047438 博主 摩羯座-小齐 因为文章名便于搜索,内容简洁易懂,故而转载过来,已和博主打招呼啦,他要是没看见可不能怪我HTTP Referer是header的一部分,当浏览器向web服务器发送请求的时候,一般会带上Referer,告诉服务器我是从哪个页面链接过来的,服务器籍此可以获得一些信转载 2017-07-24 16:08:28 · 717 阅读 · 0 评论 -
新手如何简单理解directive的scope
看了angular的菜鸟教程和官方教程,觉得不是特别够用,作为新手就算理解了1+1=2,但在计算稍微复杂点的公式(场景或者需求)时,中间依旧有断隔。为了加深记忆,对于不理解之处,自己在新人的角度做个测试记录说明一下。所有分割线的论证部分如果不想看,可快速翻阅跳过1、测试自定义指令内部运行的顺序得出结果:区域1 > 区域2 > 区域3 > 区域4代码书写顺序如下function($compile){ //区域1,这个地方通常用来生成dom,直接给下面的template赋值.原创 2020-05-24 01:25:26 · 407 阅读 · 0 评论 -
记录angularjs directive小报错以及多节点包含,单节点替换的测试过程
directive报错的问题小记今天遇到了这个问题,遂记录下有几处需要注意的地方。后续多处报错都是这个错误显示。首先1、return不能为空,否则$compile报错自定指令没有返回时(代码如下),报下面这个编译错误。如在调式过程,会影响整体输出效果。2、扩展的html标签能正常显示的简单规则本来知道templateUrl是如此,html里面只接收一个元素节点,但没注意过template,而template比较灵活,也可接受多节点。简单规则就是1、可 包含(replace:false)原创 2020-05-23 02:43:32 · 189 阅读 · 0 评论 -
angularjs执行ng-repeat判断完成状态,生成可复用性自定义指令
先上代码html//调用监听事件afterRightEditRepeat,注意不要写成afterRightEditRepeat()调用形式<div ng-repeat="x in menu" on-finish-render="afterRightEditRepeat">....</div>js自定义指令部分//onFinishRender对应属性on-finish-renderapp.directive('onFinishRender', ['$timeout',原创 2020-05-21 02:43:05 · 463 阅读 · 0 评论 -
angularjs $anchorScroll操作滚动效果,类似锚点
先上主体代码 1. let old = $location.hash(); 2. $location.hash('right-sub-menu'); 3. $anchorScroll(); 4. $location.hash(old);解释:$location.hash()这个方法获取当前锚点,亦可设立锚点。接收一个id值参数,如果要滚动到一个id=“aa”,就写成$location.hash("aa")来看一个小解读,本地项目地址为http://localhost:80原创 2020-05-20 23:37:34 · 746 阅读 · 0 评论