草庐IT

styled-component

全部标签

javascript - 如何测试在 componentDidMount 中设置 React Component 状态的异步调用

测试componentDidMount中的异步调用设置React组件状态的最佳方法是什么?对于上下文,我用于测试的库是Mocha、Chai、Enzyme和Sinon。这是一个示例代码:/**assumearecordlookslikethis:*{id:number,name:string,utility:number}*///asyncComponent.jsclassAsyncComponentextendsReact.Component{constructor(props){super(props);this.state={records:[]};}componentDidMou

javascript - jQuery .width()、style.width 和 jQuery .css ('width' 之间有什么区别?

jQuery的.width()、jQuery的.css('width')和.style返回的值有什么区别.width节点上的属性?我很好奇,因为在尝试将两个表格单元格的宽度设置为相等时,前两个给了我同样的错误答案。它们实际测量的是什么,为什么它与我在浏览器中查看元素时在.style属性中看到的值不同? 最佳答案 来自width官方文档Thedifferencebetween.css(width)and.width()isthatthelatterreturnsaunit-lesspixelvalue(forexample,400)w

javascript - react + 终极版 : Component does not update

尝试使用React+Redux,并且可能正在做一些明显愚蠢的事情,因为触发操作以通过网络获取数据的组件在获取数据时不会得到更新(重新呈现)。这是我的代码的相关部分:作为应用程序入口点的顶级index.js:importReactfrom'react';importReactDOMfrom'react-dom';import{Provider}from'react-redux';import{createStore,applyMiddleware}from'redux';import{Router,browserHistory}from'react-router';importredux

javascript - @types/styled-components 重复标识符 FormData

如果我在我的项目中添加@types/styled-components,我将在构建输出中出现一堆错误:ERRORin/Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(36,15):TS2300:Duplicateidentifier'FormData'.ERRORin/Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(81,5):TS2717:Subsequentpropertydeclarationsmu

javascript - Firefox 异常 'JavaScript component does not have a method named: "可用"'

我正在使用Django构建网络应用程序。我通过Ajax(jQueryv1.8.3)在Javascript中调用了一堆API。它们中的大多数都有效,但有一个特定的结果会返回一个状态为0的对象,并将此消息作为状态文本:[异常...“'JavaScript组件没有名为:'available''调用方法时:[nsIInputStream::available]”nsresult:“0x80570030(NS_ERROR_XPC_JSOBJECT_HAS_NO_FUNCTION_NAMED)”location:“JSframe::http://127.0.0.1:8000/media/js/jq

javascript - 无法读取 null 的属性 'style' - Google 登录按钮

我正在尝试为我的网站实现Google登录。登录按钮会正确显示,并且最初会成功登录。当我在使用该网站后注销并尝试移至登录页面时,我的问题就出现了(我使用的是React,所以都是一页)。我使用完全相同的函数来呈现登录页面,但它给了我一个“cb=gapi.loaded_0:249UncaughtTypeError:Cannotreadproperty'style'ofnull”。gapi的错误就出现在这里(至少我是这么认为的):a.El;window.document.getElementById((c?"not_signed_in":"connected"这是我最初添加要呈现的登录按钮的方

javascript - 错误 : attempted to update component that has already been unmounted (or failed to mount)

我是React的新手,由于这个错误,我无法呈现我的应用程序。由于尝试在卸载时设置状态,我试图呈现为元素的数据似乎不会呈现?我不确定我是怎么得到这个错误的,因为我正在componentDidMount中设置Data的状态。我该如何解决这个问题?error:attemptedtoupdatecomponentthathasalreadybeenunmounted(orfailedtomount)classProfileextendsReact.PureComponent{staticpropTypes={navigation:PropTypes.object,handleLogout:Pr

javascript - Vuex:跳过 Action 并直接从 Component 提交 Mutation

在vue.js应用程序中,使用vuex作为状态管理存储,我需要简单地更改vuex中的属性值。为此,我可以采用两种方法:调度action方法,该方法将进一步提交mutation,最终将更改状态。第二种方法是直接从组件提交mutation,然后mutation方法将更改状态。目前,我正在使用这样的第一种方法:在组件中:this.$store.dispatch('updateNotice','这是一些通知')在行动中:updateNotice({state,getters,commit},payload){提交('UPDATE_NOTICE',有效载荷)}在突变中:UPDATE_NOTICE

javascript - 从 webpack 的 ExtractTextPlugin 和 style-loader 中缩小 css

在此跟踪器存储库中:https://github.com/pconerly/libsass-spritesmith-webpack-tracer这一行:https://github.com/pconerly/libsass-spritesmith-webpack-tracer/blob/master/webpack.config.js#L82我正在加载.scss,并将它们提取为纯文本。我还想缩小它们---我该怎么做?style-loader似乎没有它的选项。我应该改用另一个插件,例如css-loader吗? 最佳答案 所以除非您明确

javascript - react .js : the most efficient way to pass a parameter to an event handler without bind() in a component

当事件处理程序使用this时(像下面的handleClick一样使用this.setState),你必须将事件处理程序与this关键词。否则,您需要使用thearrowfunction.例如//Thisfunctionisn'tboundwhilstusing"this"keywordinsideofit.//Still,itworksbecauseitusesanarrowfunctionhandleClick=()=>{this.setState({isClicked:true});}render(){return(Click);}但是,使用上述方法,您不能传递参数。您需要使用..