草庐IT

组件封装

全部标签

javascript - enzyme 浅渲染正在渲染子组件

我正在尝试浅渲染组件以执行一些基本的单元测试。我正在执行此操作的组件有两个子组件,每个子组件根据父组件渲染多次。当查询浅渲染组件时,子元素也被完全渲染,这意味着子元素的HTML元素也可以访问。我正在使用Karma、Browserify、Jasmine和Enzyme,如果需要,可以发布每个的配置。以前有人见过类似的行为吗? 最佳答案 这是正确的行为。与enzyme的其他渲染方法不同的是,它不调用任何生命周期方法,也不转换为真正的html,但它会渲染它的所有子项和子项的子项等等。 关于jav

javascript - React 组件在其 props 方面必须表现得像纯函数吗?

我正在浏览React文档并阅读这一行(粗体显示他们的):AllReactcomponentsmustactlikepurefunctionswithrespecttotheirprops.这是避免意外行为的严格要求还是设计原则?Facebook提供的“不纯”函数示例是修改其输入的函数。但是React组件似乎可以修改它作为输入接收的Prop(我已经从他们自己的示例中复制了下面的示例)。CodePen:ImpureComponentw/RespecttoProps?JSX代码:varWithdraw=React.createClass({render(){this.props.accoun

javascript - angular 2 ngfor 在数组中显示组件

我有一个组件数组,我想显示该数组中的现有组件,但它不起作用,我怀疑在ngfor中创建并显示了一个新组件,而不是数组中的组件,因为我确实看到了新组件组件已创建但具有默认值而不是传递给它们的当前值,我做错了什么?html:typescript:if(this.visualDivArray.length 最佳答案 让您的VisualTextDivComponent创建一个对象数组。将该数组传递给ngFor。然后将数组的每个项目传递到您的app-visual-text-div组件中,如下所示:curLineCounter或更好的名称,是ap

javascript - 容器组件是否应该*始终*连接​​到 Redux?

我即将开始一个新的React项目,并尝试利用我以前的知识来创建一些关于我如何构建应用程序的规则。有些事情我认为是真的:Redux保存整个应用程序的“主要”数据如果需要跨应用程序共享,Redux可以保存UI状态(例如,可以从任何地方启动的全局模态窗口)如果不需要在应用中的其他任何地方共享该状态,则组件可以使用setState保持它们自己的状态。应尽可能使用无状态组件当我创建一个需要来自Redux的状态的组件时,我将创建FooContainer.js和FooComponent.js文件-Redux连接代码将位于容器中.应用程序的很大一部分是UI繁重的,并且有很多UI逻辑/状态正在进行,但不

javascript - 将 css 注入(inject) Vue 组件?

见下文my-component.vue。此组件需要可主题化。它需要获取外部css表,因为我需要允许其他开发人员自定义其内部外观。除了acceptajavascriptobject还有其他方法吗??.A{background-color:green;}.B{background-color:red;}.C{background-color:yellow} 最佳答案 在你的组件中:exportdefault{props:{boxStyle:{type:String,default:'box-default'}}}.box-default

javascript - React/Mobx - 组件正在重新渲染,但未调用 componentWillReceiveProps()

我有React/Mobx应用程序。当我在商店中进行更改时,组件正在更新(重新渲染),但我需要进行一些比较以添加更多功能,因此我想使用componentWillReceiveProps(nextProps)并将nextProps与this.props进行比较。不知何故,它没有被调用。任何想法,我做错了什么,或者我还能做些什么来获得它? 最佳答案 tl;dr:使用componentWillUpdate和componentDidUpdate作为prop传递的对象Store永远不会改变,即使它的内容发生变化。使用@observable的技巧

javascript - 基于组件的架构 [Javascript]

问。在没有任何框架的情况下使用vanillajavascript-什么是基于大规模组件的架构的模式?我理解将组件拆分成单独的部分并拥有自己的结构、方法和API的想法。但是我不知道如何将它们联系在一起。业务逻辑在哪里?您如何构建项目,在哪里包含所有方法等。我的经验是单一的,所有的东西都耦合得太紧了。对此的任何澄清将不胜感激,感觉就像我在原地转圈。注意:当我谈论基于组件的架构时,我指的是thisidea 最佳答案 你可以阅读更多关于Object-Pattern和Module-Patternhttps://learn.jquery.com

javascript - 使用 jest/enzyme 对 formik 组件进行单元测试

我整理了一个非常基本的联系表格,效果很好。但是,我现在需要开始编写我的单元测试,但我遇到了一大堆问题(就像我到目前为止只设法通过了一个快照测试)。因此,首先我尝试测试,如果您没有填写所有必填部分,当您单击提交按钮时,该表单是否应该呈现我的验证消息。我认为我可以通过调用handleSubmit()函数来实现这一点,例如:componentRender.find('Formik').instance().props.handleSubmit(badFormValues,{resetForm});但是,当我运行componentRender.debug()时,我的验证消息没有被呈现。好像没有

javascript - 使用 Jest 模拟在 vue 组件中导入的模块

我在处理documentationofJest时遇到一些问题,因为我希望这段代码能够工作:importVuefrom'vue';importRouterfrom'@/router/index';importOrdersServicefrom'@/services/orders.service';jest.mock('@/services/orders.service');describe('OrdersItem.vue',()=>{beforeEach(()=>{//mockCleardoesnotexistOrdersService.mockClear();});it('should

javascript - 从内容脚本 onbeforeunload 向附加组件发出消息?

我有一个内容脚本,它计算用户浏览页面的时间。为此,我将一个内容脚本注入(inject)每个页面,启动一个计时器,然后在onbeforeunload事件被触发时向插件发送一条消息。然而,该消息似乎从未传递到后台脚本。鉴于我的main.js看起来像这样:varpageMod=require('page-mod'),self=require("self");pageMod.PageMod({include:"http://*",contentScriptFile:[self.data.url('jquery.min.js'),self.data.url('content.js')],onAt