草庐IT

react-context

全部标签

javascript - 组件不会在路由更改时重新呈现 - React HashRouter

我遇到了react和react-router的问题。当我单击链接时(在我的示例中,Footer.js中的contact),url发生变化,但未显示所需的组件Location.当我刷新网站时,会显示正确的组件。App.js:importReact,{Component}from'react';import{BrowserRouterasRouter,HashRouter,Route,Link}from'react-router-dom';import'bootstrap/dist/css/bootstrap.css';importFooterfrom'./Footer.js';impor

javascript - React hook 相当于设置状态后的回调函数

这个问题在这里已经有了答案:Howtouse`setState`callbackonreacthooks(22个答案)关闭1年前。在React中(在钩子(Hook)之前),当我们设置状态时,我们可以在设置状态之后调用一个函数:this.setState({},()=>{//Callback})这与hooks的等价物是什么?我试过这样做const[currentRange,setCurrentRange]=useState("24h");setCurrentRange(someRange,()=>console.log('hi'))但这没有用有人知道这个的解决方案吗?

javascript - Javascript 的 "multiple execution contexts"是如何工作的?

Javascript没有可见的线程(但是——工作线程即将到来,请参阅JavaScriptandThreads中的更多信息)。但是,当您有多个FirefoxWindows和多个Firefox/IE选项卡时,它似乎确实有多个似乎同时存在的执行上下文——独立的。当页面上有多个iframe时,每个iframe都有自己的执行上下文,但它们共享数据。如果两个iframe在同一个域中,它们可以访问彼此的DOM并调用彼此的函数。尽管如此,我在谷歌上找不到调度模型的描述,即它是否是:并行/抢占式,在哪种情况下——您可以暂时暂停吗?任何形式的相互排斥?合作,在这种情况下——一个人如何屈服于另一个环境?非重

javascript - 火狐插件 : adding icon to context menu

我正在尝试构建一个firefox插件,我想在右键单击内容菜单中添加图像/图标,例如,firebug在右键单击上下文菜单中有一个图标,我想做类似的事情,我的插件也包含菜单项我的插件在上下文菜单中的结构:[icon][menu][menuitem1][menuitem2][menuitem3][menuitem4]我该怎么做? 最佳答案 您必须设置imageattribute,给元素classmenu-iconic并存储图像以便您可以访问它。XUL:...JavaScript:您还可以动态设置或更改图像(首先获取对元素的引用):menu

javascript - 为什么 React 需要 jsdom 进行测试?

在为React组件编写测试时,您必须将它们渲染到DOM中,以便断言它们的正确性。例如,如果你想测试某个类是否被添加到给定某个状态的节点,你必须渲染到DOM节点,然后通过普通的DOMAPI检查该DOM节点。问题是,考虑到React维护一个虚拟DOM来渲染它,为什么我们不能在组件渲染后就在虚拟DOM上断言?在我看来,这是拥有虚拟DOM之类的东西的一个很好的理由。我错过了什么吗? 最佳答案 你真的没有错过任何东西。我们正在努力让它变得更好。虚拟部分一直是React的一个非常重要的实现细节,没有以任何有用或可靠的方式暴露出来进行测试。我们的

javascript - React.js - 在 Render 中区分加载/空状态的简洁方法

我有我的组件:getInitialState(){return{items:[]};},componentDidMount(){//makeremotecalltofetch`items`this.setState({items:itemsFromServer})},render(){if(!this.state.items.length){//showemptystate}//outputitems}极度做作/沙盒化,但这是一般的想法。当您第一次加载该组件时,您会看到一闪而过的“空状态”HTML,因为服务器尚未返回任何数据。有没有人有一种方法/ReactWay™来处理是否实际上没有数

javascript - React.js 中已弃用的 setProps() 的替代方案是什么?

我刚刚将项目的React版本升级到13.3,setProps()不再有效。我在这个Mocha测试中使用它,但我不确定现在如何重写它。我有哪些选择?it('reloadssearchresultswhenpropschange',function(){varloadResultsSpy=sinon.spy(searchView,'loadSearchResults');varnewProps={searchBy:'foo',searchTerm:'bar'};searchView.setProps(newProps);expect(loadResultsSpy.calledWith(ne

javascript - TypeScript、React 和 Gulp.js - 定义 React

我正在尝试创建一个工作流程,我可以在其中使用TypeScript编写React模块并通过Gulp.js自动编译为JavaScript。我正在使用TypeScript1.6.2、gulp-react和gulp-typescript。我的.tsx文件现在看起来像这样:///importReact=__React;interfaceHelloWorldProps{name:string;}varHelloMessage=React.createClass({render:function(){returnHello{this.props.name};}});React.render(,doc

javascript - 用 enzyme react 测试组件 Prop 变化

我正在修改此处找到的示例:https://github.com/airbnb/enzyme/blob/master/docs/api/ReactWrapper/setProps.mdclassFooextendsReact.Component{render(){return({}}/>);}}it('shouldpassanddoesnot',()=>{constwrapper=mount();expect(wrapper.find('.foo').html()).toBe(``);wrapper.setProps({name:'bar'});expect(wrapper.find('

javascript - 带有 redux 和 react 的多个注册表

我一直在尝试开发一个类似于airbnb列表表单的仪表板表单,以便更深入地了解Reactredux,但我被困在我的项目中间。我有一个多表单,当用户点击继续按钮时,用户将获得另一个表单来填写等等,如果用户点击后退按钮,用户将获得一个返回前一步的表单,其中包含之前填写的值。我无法决定我应该为此做什么。我是否必须创建一个正在运行的对象作为listingName。摘要、姓名、电子邮件等作为空值,并使用Object.assign()或其他方式使用reducer更新它。直到现在我只能开发像当用户点击个人选项卡时显示与个人信息相关的表格,当用户点击基本选项卡时,显示与基本信息相关的表格。我希望所有表单