
前端框架
文章平均质量分 67
前端框架类学习记录与技巧分享
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 · 330 阅读 · 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 · 303 阅读 · 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 · 497 阅读 · 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 · 667 阅读 · 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 · 628 阅读 · 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 · 301 阅读 · 0 评论 -
新手如何简单理解directive的scope
看了angular的菜鸟教程和官方教程,觉得不是特别够用,作为新手就算理解了1+1=2,但在计算稍微复杂点的公式(场景或者需求)时,中间依旧有断隔。为了加深记忆,对于不理解之处,自己在新人的角度做个测试记录说明一下。所有分割线的论证部分如果不想看,可快速翻阅跳过1、测试自定义指令内部运行的顺序得出结果:区域1 > 区域2 > 区域3 > 区域4代码书写顺序如下function($compile){ //区域1,这个地方通常用来生成dom,直接给下面的template赋值.原创 2020-05-24 01:25:26 · 611 阅读 · 0 评论 -
记录angularjs directive小报错以及多节点包含,单节点替换的测试过程
directive报错的问题小记今天遇到了这个问题,遂记录下有几处需要注意的地方。后续多处报错都是这个错误显示。首先1、return不能为空,否则$compile报错自定指令没有返回时(代码如下),报下面这个编译错误。如在调式过程,会影响整体输出效果。2、扩展的html标签能正常显示的简单规则本来知道templateUrl是如此,html里面只接收一个元素节点,但没注意过template,而template比较灵活,也可接受多节点。简单规则就是1、可 包含(replace:false)原创 2020-05-23 02:43:32 · 245 阅读 · 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 · 596 阅读 · 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 · 798 阅读 · 0 评论 -
【简单的react】 当你需要使用JSX的拼接的时候
项目体验欢迎体验【react项目:饿了么点单流程】:http://47.93.235.67:8083ps:要是遇到打不开的情况,那就是我服务挂掉了,react使用热更新服务器无法用nohup挂载,终端窗口退出会导致页面打不开,项目刚上我还没解决这个问题写项目的原因是,看了网上大量的文章,都不如一个实战来的更深有体会。参考资料:http://huziketang.mangojuice.top/books/react/lesson2任何新的概念都会加深新人理解的难度,所以这里不会出现新词,所有原创 2020-06-16 15:27:38 · 5223 阅读 · 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 · 1686 阅读 · 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 · 668 阅读 · 0 评论