草庐IT

Reactjs-setState

全部标签

javascript - react : componentDidMount + setState not re-rendering the component

我对使用componentDidMount和setState来使用react并努力更新自定义组件相当陌生,这似乎是推荐的做法。下面是一个示例(包括用于获取数据的axiosAPI调用):importReactfrom'react';import{MyComponent}from'my_component';importaxiosfrom'axios';exportdefaultclassExampleextendsReact.Component{constructor(props){super(props);this.state={data:[]};}GetData(){returnax

javascript - 如何从外部reactjs获取变量

我需要获取放置在我的React容器之外的变量的值。var_variable=3我需要在我的react-component中获取这个值,如果可能的话,将这个值存储在Store(redux)中 最佳答案 如果将声明脚本放在react加载脚本之前,react脚本应该能够访问它。varx={{user_details}}; 关于javascript-如何从外部reactjs获取变量,我们在StackOverflow上找到一个类似的问题: https://stackov

javascript - ReactJS 如何在 React 中切换页面?

所以来自Angular/AngularJS背景,你有状态,每个状态都是一个单独的页面。例如。在社交网络中,你可以有一个状态与你的提要,一个状态与你的friend列表,或者一个状态来查看个人资料等。非常简单。对我来说,React不是那么多。假设我有一个包含2个页面的应用程序:一个产品列表和一个产品View。在它们之间切换的最佳方法是什么?最简单的解决方案是拥有一个对象,它有一个stateName并且是一个bool值constructor(){super();this.state={productList:true,productView:false}}然后在你的render()函数中加入

javascript - ReactJS 组件 PropTypes - 指定具有一组参数的函数类型

我在React(版本0.13.3)组件中指定一个必需的函数proptype...varMyComponent=React.createClass({propTypes:{onClick:React.PropTypes.func.isRequired},handleClick(event){this.props.onClick(event,clickCallback);},clickCallback(){console.log("foo");},render(){return}});exportdefaultMyComponent;如您所见,我的onClickProp不仅需要是一个函数,

javascript - Reactjs:在JavaScript中,默认不绑定(bind)类方法

我正在关注reactjshandling-eventsdocumentation,我遇到了这个:InJavaScript,classmethodsarenotboundbydefault.Ifyouforgettobindthis.handleClickandpassittoonClick,thiswillbeundefinedwhenthefunctionisactuallycalled.我从这段引文中了解到,this并未指定每个类方法中的当前实例化。但是,如果我考虑下面的代码,方法editState可以通过访问扩展类Parent的属性state这个。这会使前面的引述错误,因为thi

javascript - 在 React setState 函数中使用 e.target.value 的问题

我在React中遇到了一个奇怪的问题。我想我可能还没有完全掌握React的工作原理,非常感谢您的帮助。请在下面找到我的React组件:classmyComponentextendsComponent{state={value:''}updateValue=e=>{this.setState({value:e.target.value})}render(){return()}}然后,现在如果我在文本字段中键入内容,我将收到以下警告和错误:警告:出于性能原因重用此合成事件。如果您看到这一点,则表示您正在访问已发布/已取消的合成事件的属性target。这被设置为空。如果您必须保留原始合成事件

javascript - ReactJS 中什么是更快的原始 CSS 或内联样式?

如果您将所有CSS都作为内联样式,ReactJS虚拟DOM是否会使您的应用程序更快?VS使用原始.css文件?http://facebook.github.io/react/tips/inline-styles.html另请参阅关于JavaScript中CSS的ReactJS演示文稿:https://speakerdeck.com/vjeux/react-css-in-js 最佳答案 浏览器已投入多年努力,使其CSS样式表解析+渲染引擎速度极快且内存效率高。内联样式并没有完全相同的处理方式。然而好的一面是,如果您正在创建正常大小的应

javascript - React setState 中的竞争条件

问题:一个组件的多个子组件几乎同时触发了事件。这些事件中的每一个都由handleChange风格的函数处理,这些函数使用React的不变性助手将复杂对象合并到控制组件的状态中,通过类似于;this.setState(React.addons.update(this.state,{$merge:new_value_object}));这在事件独立触发时工作正常,但当多个事件以这种方式导致状态更新时,每个事件都单独从状态的旧版本合并。IE。(伪代码,不打算执行)。functionlogState(){console.log(this.state)}logState();//{foo:'',

javascript - 我如何从 JavaScript 判断 ReactJS 是否处于开发模式?

我正在写一个Mixin对于ReactJS。我希望它做一些验证,但只有在developmentmode中使用ReactJS时.我如何从JavaScript判断ReactJS是处于开发模式还是生产模式? 最佳答案 ReactJS源代码使用一个名为__DEV__的变量跟踪它,但它没有被导出,所以它对你的Mixin不可用。然而,它的后果是。例如,当你打破一个不变量时,开发模式ReactJS会给你一个很好的错误描述。在生产模式下,它会给出一个一般错误,告诉您使用开发版本。我们可以使用它来构建一个函数来确定React是否处于开发模式:funct

javascript - ReactJS 在等待数据时加载图标

我正在试验ReactJS,我的大部分应用程序都依赖于从API加载数据,使用jQuery来帮助我。我有加载文本/图标设置,但感觉有点老套而且不太可重用:ListWrapper=React.createClass({getInitialState:function(){return{loading:true,listData:[]};},componentDidMount:function(){Api.get('/v1/listdata',function(data){react.setState({loading:false,listData:data});});},render:fun