草庐IT

react异步组件

全部标签

javascript - 在 react 中更新状态时递归太多

在此示例中,当我尝试在componentDidUpdate生命周期回调期间更新状态时,出现了toomuchrecursion错误。我应该如何更新状态?importReactfrom'react';classNotesContainerextendsReact.Component{constructor(props){super(props);this.state={listOfShoppingItems:[]};}componentDidUpdate(nextProps,nextState){letnewShoppingItems=this.calculateShoppingItems

javascript - 如何解决递归异步 promise ?

我在玩弄promises,我在处理异步递归promise时遇到了麻烦。场景是一位运动员开始跑100米,我需要定期检查他们是否跑完了,一旦他们跑完了,打印他们的时间。编辑以澄清:在现实世界中,运动员在服务器上运行。startRunning涉及对服务器进行ajax调用。checkIsFinished还涉及对服务器进行ajax调用。下面的代码试图模仿它。代码中的时间和距离是硬编码的,目的是让事情尽可能简单。抱歉没有说清楚。结束编辑我希望能够写出以下内容startRunning().then(checkIsFinished).then(printTime).catch(handleError)

javascript - 如何在不违反内联脚本 CSP 的情况下使用 jinja2 服务器端渲染和 react

我是React的新手,正在尝试一些。我想在使用Jinja2模板的Flask站点上使用它。人们似乎建议首先在服务器端呈现数据,而不必总是在页面加载时对数据进行初始调用。我找到了这个nodejs示例,但它只是将页面上的数据放在内联脚本标记中的全局变量中。我想知道除了将页面上的数据放在内联脚本标记内之外,是否有一种干净的方法可以做到这一点。由于我的安全CSP策略,我不能使用内联脚本或eval。人们是否使用标准模式在不使用内联变量的情况下在服务器上为React呈现数据? 最佳答案 您当然可以在通过Jinja进行服务器端呈现的站点上使用它。问

javascript - 如何在我的 React 应用程序中嵌入 Facebook 发送按钮?

我有一个客户端呈现的React应用程序。我想在我的页面上显示一个Facebook发送按钮。开发者页面上给出的说明没有告诉我该怎么做https://developers.facebook.com/docs/plugins/send-button#configurator另外,我没有找到facebook为其SDK发布的npm兼容包。那么如何将SDK包含在React应用程序中呢?编辑:我尝试在React中使用一些异步加载器。importReact,{Component}from'react';importscriptLoaderfrom'react-async-script-loader';

javascript - React.js 错误 "Adjacent JSX elements must be wrapped in an enclosing tag"

我有下面的代码是react.js抛出错误“相邻的JSX元素必须包裹在封闭标签中”。看起来React不接受彼此相邻的相同标签如何显示表格数据?varTestRecords=React.createClass({render:function(){return({this.props.records.map(record=>{return{record.title}record.id})});}}); 最佳答案 使用React,您可以只向组件树提供两种东西-节点(元素)或节点集合。这里您提供了两个节点(两个td)。您需要将它们包装在tr

javascript - Vue.js 访问父组件

我有一个具有此方法的子组件:getSubscriptions(){MessageService.subscriptions()this.$parent.loading=true;.then((data)=>{if(data.data.subscriptions==null){this.noSubscriptions=true;}else{this.subscriptions=data.data.subscriptions;}this.$parent.loading=false;}).bind(this);}所以我想在我的父组件中显示一个加载圆,我这样访问它:this.$parent.l

javascript - 为动态创建的组件添加事件绑定(bind)

我使用ViewContainerRef.createComponent()方法在app.component.ts中动态创建组件,该方法返回一个ComponentRef对象.letnewComponent:ComponentRef=this.filtersSection.createComponent(MyDateRangeComponent);我需要动态地向这个组件添加一个事件监听器,以便它监听onDateRangeChange事件并执行app中定义的dateRangeChanged(event)方法.component.ts组件。我最初在app.component.html中以这种方

javascript - 控制 javascript 异步流的速率(在循环中)

假设您想用一段短代码为列表中的每个文件夹启动一个(随机)进程:varexec=require('child_process').exec;varfolders=[...];//alistfromsomewhere_.each(folders,function(folder){exec("tarcvf"+folder+".tgz"+folder);});如果列表很长,我可能会同时运行大量进程,这是要避免的。以受控速率(此处最多5个并发进程)运行执行的相当简单的方法是什么?编辑:该问题适用于各种异步流(您希望在其中控制速率),而不仅仅是文件夹执行问题。 最佳答案

javascript - vuejs v2.0 向组件传递数据

我使用vue.js在Laravel5.3上构建了一个应用程序,我开始转向vue.js以使页面动态化。我在一个页面上完成了所有工作,所以想将其转换为一个组件,但在这样做之后我收到以下错误:[Vuewarn]:ErrorwhenrenderingcomponentatC:\xampp\htdocs\.......TypeError:Cannotreadproperty'nxt_weekly'ofundefined我像这样将数据传递给View:constapp=newVue({el:'#app',mounted:function(){this.fetchEvents();},data:{lo

javascript - react native ListView onEndReached 多次调用

我在使用ReactNative中的ListViewonEndReached组件时遇到了一些问题。渲染代码:@autobind_fetchMoreHistory(){console.log("Fetchmorehistorycalled");}我打开屏幕的那一刻_fetchMoreHistory被调用了两次并且在到达onEndReached之后正常工作。有人可以帮助调试吗? 最佳答案 我遇到了同样的问题并进行了很多搜索但没有找到任何答案,所以我使用了一个条件来检查第一个请求是否得到了我再次触发的数据,否则我没有例子//onEndRea