Tag: reactjs

在React.js 0.12这个.key

随着0.12版本的发布, this.props.key在一个组件中不再可用,不过听起来你可以简单地用this.keyreplace它,一切都应该按预期工作。 从React v0.12文档 : 这意味着你需要重命名:someElement.props.key – > someElement.key 但是当我尝试访问我的组件的render()函数中的this.key ,我得到一个undefined 。 看我的笔来说明这个问题: http : //codepen.io/anon/pen/jaczr?editors=100 也: React组件的实例在渲染时在React内部创build。 这些实例在后续渲染中被重用,并且可以像这样在你的组件方法中被访问。 我该如何访问组件的密钥? UPDATE GitHub上存在这个问题,这个问题很多。 感谢HEAP提到它。

Webpack – 错误:无法在加载器列表中定义“查询”和多个加载器

我在数组中添加'react-hot'加载器后出现错误。 我已经按照这个教程︰https: //robots.thoughtbot.com/setting-up-webpack-for-react-and-hot-module-replacement然而,我越来越Error: Cannot define 'query' and multiple loaders in loaders list 。 var WebpackDevServer = require("webpack-dev-server"); var webpack = require('webpack'); var path = require('path'); require("babel-polyfill"); var BUILD_DIR = path.resolve(__dirname, 'build'); var APP_DIR = path.resolve(__dirname, 'src'); module.exports = { entry: [ 'babel-polyfill', 'bootstrap-loader', 'webpack/hot/dev-server', APP_DIR + '/import.js', ], output: { path: BUILD_DIR, filename: 'bundle.js' }, […]

ReactJs – 创build一个“If”组件…一个好主意?

我读过React文档,“if”类​​型的语句不能在JSX代码中使用,因为JSX呈现给javascript的方式,它不会像预期的那样工作。 但是,为什么实现一个“if”组件是一个坏主意呢? 从我最初的testing看来,它似乎工作得很好,并让我想知道为什么这不是更经常做? 我的部分目的是让反应发展尽可能多,基于标记 – 尽可能less的JavaScript。 对我来说,这种方法更像是一种“数据驱动”的方法。 你可以在这里查看JS小提琴 <script type='text/javascript' src="https://unpkg.com/react@0.11.0/dist/JSXTransformer.js"></script> <script type='text/javascript' src="https://unpkg.com/react@0.11.0/dist/react-with-addons.js"></script> <script type="text/jsx"> /** @jsx React.DOM */ var If = React.createClass({ displayName: 'If', render: function() { if (this.props.condition) return <span>{this.props.children}</span> return null; } }); var Main = React.createClass({ render: function() { return ( <div> <If condition={false}> <div>Never showing false item</div> </If> <If […]

使用react-routerlogin后自动redirect

我想在我的react / react-router / flux应用程序中构build一个Facebooklogin。 我有一个在login事件中注册的监听器,并且想要将用户redirect到“/仪表板”,如果他们已经login。我该怎么做? Location.push不能很好地工作,除非完全重新加载页面。

在Relay中,节点接口和全局ID规范起什么作用?

我开始使用relay-starter-kit并且通过Relay和GraphQL文档工作。 但是有不less地方是无法解释和神秘的。 我认真地阅读了大量关于所有这些事情的文件,但是对于下面的问题找不到任何令人满意的解释: 这个是来做什么的? 我把日志,但它甚至从来没有被称为: var {nodeInterface, nodeField} = nodeDefinitions( (globalId) => { var {type, id} = fromGlobalId(globalId); if (type === 'User') { return getUser(id); } else if (type === 'Widget') { return getWidget(id); } else { return null; } }, (obj) => { if (obj instanceof User) { return userType; } else if (obj […]

在react-native中,什么方法没有绑定URL?

当我运行一个react-native项目时,我得到一个错误, no bundle URL present ,但我不知道我做了什么错误,我非常困惑。

ReactJS:“Uncaught SyntaxError:Unexpected token <”

我正在尝试在ReactJS中开始构build网站。 但是,当我试图把我的JS在一个单独的文件,我开始得到这个错误:“未捕获的SyntaxError:意外的令牌<”。 我尝试添加/** @jsx React.DOM */到JS文件的顶部,但它没有解决任何问题。 下面是HTML和JS文件。 任何想法是什么问题? HTML <html> <head> <title>Page</title> <script src="http://fb.me/react-0.12.2.js"></script> <script src="http://fb.me/JSXTransformer-0.12.2.js"></script> <script src="http://code.jquery.com/jquery-1.10.0.min.js"> </script> <script src="./lander.js"> </script> </head> <body> <div id="content"></div> <script type="text/jsx"> React.render( <Lander />, document.getElementById('content') ); </script> </body> </html> JS /** * @jsx React.DOM */ var Lander = React.createClass({ render: function () { var info = "Lorem ipsum […]

ReactJS中的dynamic属性

我想dynamic包括/省略button元素的禁用属性。 我已经看到了很多dynamic属性值的例子,而不是属性本身。 我有以下渲染function: render: function() { var maybeDisabled = AppStore.cartIsEmpty() ? "disabled" : ""; return <button {maybeDisabled}>Clear cart</button> } 这会由于“{”字符而引发parsing错误。 如何根据AppStore.cartIsEmpty()的(boolean)结果包含/省略disabled属性?

Reactjs – 正确设置内联样式

我正在尝试与剑道分离器一起使用Reactjs。 分配器有一个像样式的属性 style="height: 100%" 有了Reactjs,如果我已经正确地理解了事情,这可以使用内联样式来实现 var style = { height: 100 } 不过,我也在使用Dustin Getz jsxutil来试图分割一些东西,并有独立的HTML片段。 到目前为止,我有以下的HTML片段(splitter.html) <div id="splitter" className="k-content"> <div id="vertical"> <div> <p>Outer splitter : top pane (resizable and collapsible)</p> </div> <div id="middlePane"> {height} <div id="horizontal" style={height}> <div> <p>Inner splitter :: left pane</p> </div> <div> <p>Inner splitter :: center pane</p> </div> <div> <p>Inner splitter :: […]

在React.js中编辑丰富的数据结构

我正在尝试为数据结构创build一个简单的基于网格的编辑器,而且我还有一些React.js的概念问题。 他们的文档对此没有太大的帮助,所以我希望有人能帮上忙。 首先,从外部组件向内部组件转移状态的正确方法是什么? 是否有可能在内部组件的状态变化“冒泡”到外部组件? 其次,两个单独的组件可以共享数据,以便在另一个中可以看到一个突变? 下面是我想做的事情( JSFiddle版本 )的一个简单的例子: 我有一个company对象包含一个employee对象的数组。 我想在可编辑的网格中列出employee列表。 当我点击button时,我想看到生成的company对象,以及任何突变(写入控制台)。 /** @jsx React.DOM */ var Cell = React.createClass({ getInitialState: function () { return {data: ""}; }, componentWillMount: function () { this.setState({data: this.props.data}); }, onChange: function (evt) { console.log(this.state, evt.target.value); this.setState({data: evt.target.value}); }, render: function () { var data = this.props.data; return <input value={this.state.data} onChange={this.onChange} […]