Tag: reactjs

实例v中的react.js中的状态variables

在react.js中，将超时引用存储为实例variables（this.timeout）还是状态variables（this.state.timeout）会更好吗？ React.createClass({ handleEnter: function () { // Open a new one after a delay var self = this; this.timeout = setTimeout(function () { self.openWidget(); }, DELAY); }, handleLeave: function () { // Clear the timeout for opening the widget clearTimeout(this.timeout); } … }) 要么 React.createClass({ handleEnter: function () { // Open a new one after […]

如何监听组件外的单击事件

当点击发生在下拉组件之外时，我想要closures下拉菜单。 我怎么做？

使用extract-text-webpack-plugin React时，窗口未定义错误

我正在使用webpack来构build我的反应组件，我试图使用extract-text-webpack-plugin来从我生成的js文件中分离出我的css。 但是，当我尝试构build组件时出现以下错误： Module build failed: ReferenceError: window is not defined 。 我的webpack.config.js文件如下所示： var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: { MainComponent: './src/main.js' }, output: { libraryTarget: 'var', library: 'MainComponent', path: './build', filename: '[name].js' }, module: { loaders: [{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader!css-loader') }] }, plugins: [ new ExtractTextPlugin('styles.css') ] }

html中的data-reactid属性是什么？

当我浏览某些页面的HTML时，我注意到其中一些使用了如下的属性“data-reactid”： <a data-reactid="……" ></a> 这个属性是什么，它的function是什么？

React.js：input为空时禁用button

我是React.js的新手，对不起，如果这个问题听起来太愚蠢了。 我试图禁用一个input字段为空时的button。 React对此有什么好处？ 我正在做如下的事情： <input ref="email"/> <button disabled={!this.refs.email}>Let me in</button> 它是否正确？ 这不仅仅是dynamic属性的重复，因为我也对从一个元素到另一个元素的数据传输/检查感到好奇。

如何响应React中自动resize的DOM元素的宽度？

我有一个使用React组件的复杂网页，并试图将页面从静态布局转换为更具响应性的可resize的布局。 然而，我仍然遇到了React的限制，我想知道是否有一个标准的模式来处理这些问题。 在我的具体情况下，我有一个组件呈现为与显示的div：table-cell和width：auto。 不幸的是，我不能查询我的组件的宽度，因为你不能计算一个元素的大小，除非它实际上被放置在DOM（具有推断实际渲染宽度的完整上下文）中。 除了像鼠标定位这样的东西外，我还需要在组件中正确设置SVG元素的宽度属性。 此外，当窗口resize时，如何在安装过程中将尺寸更改从一个组件传递到另一个组件？ 我们在shouldComponentUpdate中完成所有第三方的SVG渲染，但不能在你的方法中设置自己或其他子组件的状态或属性。 有没有使用React处理这个问题的标准方法？

是否有一个崇高的文字的JSX格式化程序？

我使用Sublime Text作为文本编辑器。 有一个用于格式化JavaScript文件的js格式，但是我找不到一个用于JSX的文件。 你们如何处理格式化JSX？

从父母调用子方法

我有两个组件。 父组件 子组件 我试图从父母调用孩子的方法，我试过这种方式，但没有得到一个结果 class Parent extends Component { render() { return ( <Child /> <button onClick={Child.getAlert()}>Click</button> ); } } class Child extends Component { getAlert() { alert('clicked'); } render() { return ( <h1 ref="hello">Hello</h1> ); } } 有没有办法从父母那里调用孩子的方法？ 注：Child和Parent组件位于两个不同的文件中

检测点击React组件外部

我正在寻找一种方法来检测单击事件是否发生在组件之外，如本文所述 。 jQuery nearest（）用于查看click事件中的目标是否具有dom元素作为其父项之一。 如果匹配，click事件属于其中一个孩子，因此不被视为在组件之外。 所以在我的组件，我想附加一个点击处理程序窗口。 当处理程序触发时，我需要将目标与组件的dom子项进行比较。 点击事件包含像“path”这样的属性，它似乎包含事件已经走过的dompath。 我不知道要比较什么或者如何最好地遍历它，我想有人必须已经把它放在一个聪明的效用函数中…不是吗？

为什么JavaScript中的不变性如此重要（或需要）？

我目前正在研究React JS和React Native框架。 当我读到Facebook的Flux实现和Redux实现时，我遇到了Immutability或Immutable-JS库 。 问题是，为什么不变性如此重要？ 什么是错误的变异对象？ 它不是简单吗？ 举一个例子，让我们考虑一个简单的新闻阅读器应用程序。 开幕式是新闻头条列表视图。 如果我最初设置一个带有值的对象数组 。 我无法操纵它。 这就是不变性原则所说的，对吗？（如果我错了，请纠正我）。 但是，如果我有一个新的新闻对象，必须更新？ 通常情况下，我可以刚刚添加对象到数组中。 我在这种情况下如何实现？ 删除商店并重新创build它？ 是不是将一个对象添加到数组中一个更便宜的操作？ PS：如果这个例子不是解释不变性的正确方法，请让我知道什么是正确的实际例子。 我正在努力学习这里的东西。 请赐教:)