草庐IT

reactjs-flux

全部标签

javascript - 将 React 的不可变助手与 Immutable.js 结合使用

我正在研究助焊剂应用,正在考虑采用immutable.js保持状态。我看到React提供了自己的帮助程序来更新不可变对象(immutable对象)(http://facebook.github.io/react/docs/update.html),但无法说出它与不可变对象(immutable对象)自己的setIn和updateIn方法有何不同(即,我已经可以将对象与===进行比较,如果它们随setIn改变)。是否有理由将react助手与immutable.js一起使用?它只是语法糖吗?TL;DR是:varmap=Immutable.fromJS({bar:'baz'});map2=Re

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 - 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 - 我如何从 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

javascript - ReactJS:即使在重新渲染组件后复​​选框状态仍然存在

我创建了一个JSfiddle在这个fiddle中,最初根据传递给组件的props呈现一个复选框列表。单击Re-render按钮时,同一组件将使用一组不同的props进行渲染。现在,请按照以下步骤-加载jsfiddle选中任何一个复选框(假设我选中了第二个和第三个复选框)点击重新渲染按钮即使在使用新的props渲染组件后,您选中的复选框的状态仍保持不变(第2个和第3个仍处于选中状态)为什么会这样?我如何使用新的Prop集重新渲染组件,以便复选框的状态不会持续存在。 最佳答案 因为React的diffalgorithm很聪明。重新渲染新

javascript - reactjs - anchor 标记链接

我想弄清楚如何将这些代码行输出成类似的东西SOMETHINGBASE_URL为当我运行这段代码时,我在浏览器中得到了这样的输出:正确的做法是什么? 最佳答案 在这种情况下,您只需要丢失引号:您可以在babeljs上使用JSX编译器。更好地了解它编译成什么JS。 关于javascript-reactjs-anchor标记链接,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/18913

javascript - ReactJS 中的子父组件通信

我喜欢在事件触发onDrag时将属性properties/props/state值从子组件发送到父组件。我找不到关于此的适当文档。这是我的代码:/***@jsxReact.DOM*/varAPP=React.createClass({getInitialState:function(){return{url:'http://www.youtube.com/embed/XGSy3_Czz8k'}},handleDrag:function(vidurl){alert(vidurl);//ineedtogetchildcomponenturlhere.},render:function(){

javascript - ReactJS - React.Children.forEach - 我可以获得子组件名称吗?

我有一个包含许多子项的React(15.5.4)组件,其中一些是HTML元素,一些是其他React组件。我正在使用服务器渲染并且需要在服务器和客户端上有相同的行为。客户端将使用React的生产构建。我需要遍历子组件并确定特定类型的React组件。所以我的第一个想法是使用React.Children.forEach()进行迭代并查找组件名称。React.Children.forEach(this.props.children,child=>{console.log('name=',child.name)})似乎child.name和child.displayName不存在。现在,chil