草庐IT

react-css-modules

全部标签

javascript - 如何使用 vue-test-utils 测试 CSS 框架自定义组件

我使用的是BuefyCSS框架,它提供自定义vue-js组件,例如和,我在测试时遇到了问题标签。import{shallowMount,createLocalVue}from'@vue/test-utils'importBInputPracticefrom'../BInputPractice.vue'importBuefyfrom'buefy'constlocalVue=createLocalVue()localVue.use(Buefy)describe('b-inputPractice',()=>{it('updatesthenamedataproperty',()=>{const

javascript - 无法断言 css 宽度为 100%

我试图断言NightwatchJS中某个元素的CSS宽度为100%,但它未能说明宽度为196像素。错误信息是:Testingifelementhascssproperty"width:100%".-Expected"100%"butgot:"196px"我曾尝试使用以下语法来实现相同的目的:page.assert.cssProperty(`@button-element`,'width','100%');page.expect.element(`@${element}`).to.have.css("width").which.equals("100%");我不想使用硬编码值,因为它们会

javascript - 使用 React-Router,如何在不触发重新渲染的情况下更新 URL?

我有一个父组件,当URL与特定路径匹配时,它应该呈现另一个组件:constView:React.SFC=({....})=>{return(....}/>);};如果jobPath===/careers/:id一切正常,JobPanel.tsx将呈现。JobPanel.tsx有一个链接,当前将返回this.props.history.push(/careers){handleClose();}}>GoBack或{this.props.history.push('/careers/);handleClose();}}>GoBack问题是JobPanel应该使用此组件在页面内外进行转换:c

javascript - 用于点击跟踪的高阶 React 组件

我想实现一个更高阶的React组件,该组件可用于轻松跟踪任何React组件上的事件(如点击)。这样做的目的是轻松地将点击(和其他事件)连接到我们的第一方分析跟踪器中。我遇到的挑战是React合成事件系统需要事件(如onClick)绑定(bind)以响应DOM元素,如div。如果我包装的组件是自定义组件,就像通过高阶函数实现的每个HOC一样,我的点击事件不会正确绑定(bind)。例如,使用此HOC,onClick处理程序将为button1触发,但不会为button2触发。//HigherOrderComponentclassTrackextendsReact.Component{onCl

javascript - React-Navigation - 标题与其屏幕组件的交互,失败的 Prop 类型

我正在关注React-Navigation教程,并卡在标题为Headerinteractionwithitsscreencomponent的部分.Thecode在教程中,在snack提供的模拟器中工作正常,但我发现在本地运行时遇到以下错误:警告:Prop类型失败:Prop“onPress”在“按钮”中被标记为必需,但其值为“未定义”。我通过更改navigationOptions中的onPress事件分配,设法使用expo-cli在我的本地机器上运行代码,如下所示(mysnackhere):{navigation.getParam('increaseCount')()}}//onPres

javascript - 将整个 Redux 状态对象传递到 React 组件中是否可以?

我们有一个组件需要访问Redux的商店。importReactfrom'react'import{connect}from'react-redux'constComponent=(props)=>{...code...}我们已使用connect将此组件连接到商店。exportdefaultconnect(mapStateToProps)(Component)我们现在需要定义mapStateToProps作为第一个参数传递给connect。constmapStateToProps=state=>({...state})为什么这种将数据注入(inject)组件的方法是可以接受的,或者为什么

javascript - Svelte react 性如何在函数内部工作?

我在Svelte的react性方面遇到了一些严重的问题。我已经隔离了我认为至少是我的主要问题之一。将变量绑定(bind)到复选框时,在函数内部而不是外部设置变量时,react性似乎会中断。这是有意的行为吗?在那种情况下,为什么?预期的工作流程是什么?示例代码,一个Svelte组件:letfoo=true;//Thisassignmentworksbothontheplaintextview(Foo:true/false)//andonthecheckbox//setInterval(()=>foo=!foo,500)//Thisassignmentworksonlyontheplain

javascript - TinyMCE 正在改变我的内联 CSS

我在HTML编辑器中输入:我点击更新,然后再次点击html编辑器。HTML(在Firefox中)已更改为:如果我在InternetExplorer中做同样的事情,HTML会变成: 为什么世界会发生变化?也许我可以更改一些TinyMCE设置?但我已经清理了:false。想法?如果我启用清理,我提到的更改就不会发生。然而,TinyMCE改变了很多其他东西。我不希望它弄乱我的代码:(任何帮助将不胜感激。 最佳答案 尝试将verify_html设置为false。文档:TinyMCEConfiguration/verify_html

javascript - 使用 JavaScript 事件处理程序和函数的 CSS3 转换不会在 Firefox 中触发

我已经建立了一个多月的画廊,布局很简单,左边是缩略图菜单,右边是画廊预览。当您单击已加载的缩略图时,它会触发一个mousdown事件,该事件会折叠缩略图区域并将画廊预览扩展到完整大小(全部使用CSS3转换)。到目前为止,一切正常,除了我创建了一个omouseover事件,当您将鼠标悬停在缩略图上时该事件会激活该功能。该函数重绘图库预览div(“图片”)的内容并创建三张图像,两张是帧中的上一张图像,一张是帧中的下一张图像(在中心)。在innerHTML中,它将CSS样式“left:”设置为724px或-724px,具体取决于它是向前还是向后。然后当生成所有这些html的函数完成时,负责监

javascript - 找出哪个 CSS 属性正在被 jQuery 动画化

我看到$element.is(':animated')告诉我$element是否正在设置动画,但是否可以查看哪些css属性正在设置动画。 最佳答案 是的,将step函数传递给animate()调用可以让您找出正在通过fx.prop设置动画的属性。以下是jQueryAPI文档中的示例:$('li').animate({opacity:.5,height:'50%'},{step:function(now,fx){vardata=fx.elem.id+''+fx.prop+':'+now;$('body').append(''+data