Tag: reactjs
build议使React组件/ div可拖动的方法
我想做一个可拖动的（也就是说，可以通过鼠标来重定位）React组件，它似乎必然涉及全局状态和分散的事件处理程序。 我可以用肮脏的方式来做，在我的JS文件中有一个全局variables，甚至可能把它封装在一个不错的闭包界面中，但是我想知道是否有更好的方法与React进行网格化。 另外，因为我以前从来没有在原始JavaScript中做过这件事，所以我想看看专家是如何做到的，以确保我处理了所有的angular落案例，特别是与React相关的案例。 谢谢。
我可以在React Native中制作dynamic样式吗？
假设我有一个像这样的渲染组件： <View style={jewelStyle}></View> 哪里jewelStyle = { borderRadius: 10, backgroundColor: '#FFEFCC', width: 20, height: 20, }, 我怎样才能使背景颜色dynamic和随机分配？ 我试过了 { borderRadius: 10, backgroundColor: getRandomColor(), width: 20, height: 20, }, 但是这使View的所有实例都具有相同的颜色，我希望每个实例都是独立的。 有小费吗？
什么是AMP HTML，它如何适应框架/工具X？
好的，所以我们现在都可能听说过谷歌的AMP HTML 。 我很好奇的是这将如何适应我们现有的工作stream程。 如果您正在编写React或Angular应用程序，AMP HTML如何适应开发stream程？ 这些框架中的每一个都已经有了一个定义组件的方法，看起来AMP只是添加到堆栈中。 我们大多数人已经在使用其他工具，如browserify或webpack。 我不太乐于看到AMP如何适应其余的。 其中一些工具已经允许我们以优化的方式为我们的网站服务。 AMP HTML将会改变所有这一切？
React input defaultValue不会更新状态
我试图创build一个简单的forms与反应，但面临困难的数据正确地绑定到窗体的defaultValue。 我正在寻找的行为是这样的： 当我打开我的页面时，文本input字段应填入我的数据库中的AwayMessage文本。 这是“示例文本” 理想情况下，如果我的数据库中的AwayMessage没有文本，我想在文本input字段中有一个占位符。 但是，现在，我发现每次刷新页面时，文本input字段都是空白的。 （虽然我input的input确实保存并保持。）我认为这是因为input文本字段的html加载时，AwayMessage是一个空的对象，但不会刷新时，离开消息加载。 另外，我无法指定该字段的默认值。 我删除了一些清晰的代码（即onToggleChange） window.Pages ||= {} Pages.AwayMessages = React.createClass getInitialState: -> App.API.fetchAwayMessage (data) => @setState awayMessage:data.away_message {awayMessage: {}} onTextChange: (event) -> console.log "VALUE", event.target.value onSubmit: (e) -> window.a = @ e.preventDefault() awayMessage = {} awayMessage["master_toggle"]=@refs["master_toggle"].getDOMNode().checked console.log "value of text", @refs["text"].getDOMNode().value awayMessage["text"]=@refs["text"].getDOMNode().value @awayMessage(awayMessage) awayMessage: (awayMessage)-> console.log "I'm saving", awayMessage App.API.saveAwayMessage […]
React-router：如何手动调用链接？
我是ReactJS和React-Router的新手。 我有一个组件，通过道具接收来自react-router的<Link/>对象。 每当用户点击这个组件内的“下一个”button，我想手动调用<Link/>对象。 现在，我使用ref来访问后台实例，并手动点击<Link/>生成的“a”标签。 问题：有没有办法手动调用链接（例如this.props.next.go ）？ 这是我现在的代码： //in MasterPage.js var sampleLink = <Link to="/sample">Go To Sample</Link> <Document next={sampleLink} /> //in Document.js … var Document = React.createClass({ _onClickNext: function() { var next = this.refs.next.getDOMNode(); next.querySelectorAll('a').item(0).click(); //this sounds like hack to me }, render: function() { return ( … <div ref="next">{this.props.next} <img src="rightArrow.png" onClick={this._onClickNext}/></div> … ); } […]
从反应路由器哈希段获取查询参数
我正在使用react和react-router作为客户端的应用程序。 我似乎无法弄清楚如何从像这样的url获取以下查询参数： http://xmen.database/search#/?status=APPROVED&page=1&limit=20 我的路线看起来像这样（我知道path是完全错误的）： var routes = ( <Route> <DefaultRoute handler={SearchDisplay}/> <Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/> <Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/> </Route> ); 我的路线工作正常，但我不知道如何格式化path来获取我想要的参数。 感谢任何帮助！
ReactJS渲染string与不间断空格
我有一些道具有一个可以包含＆的字符的string。 它也包含空格。 我想使用 。 有一个简单的方法，我可以做到这一点？ 请记住，我不能只使用这个语法来渲染： <div dangerouslySetInnerHTML={{__html: myValue}} /> 因为我首先必须用它们的标记replace任何HTML实体。 我不想这样做，看起来水平太低了。 有什么办法可以做到这一点？
反应：如何更新setState上的state.item ？ （用JSFiddle）
我正在创build一个应用程序，用户可以devise自己的表单。 例如，指定字段的名称以及应该包含哪些其他列的详细信息。 该组件在这里可以用作JSFiddle。 我的初始状态如下所示： 77 var DynamicForm = React.createClass({ 78 getInitialState: function() { 79 var items = {}; 80 items[1] = { name: 'field 1', populate_at: 'web_start', 81 same_as: 'customer_name', 82 autocomplete_from: 'customer_name', title: '' }; 83 items[2] = { name: 'field 2', populate_at: 'web_end', 84 same_as: 'user_name', autocomplete_from: 'user_name', title: '' }; 85 86 […]
我如何渲染兄弟元素而不将它们包装在父标签中？
在大多数情况下，有一个父标签不是一个问题。 React.createClass({ render: function() { return ( <tbody> <tr><td>Item 1</td></tr> <tr><td>Item 2</td></tr> </tbody> ); } }); 但是在某些情况下，在一个没有父项的渲染函数中有兄弟元素是有意义的，特别是在一个表的情况下，你不想在一个div包含一个表行。 React.createClass({ render: function() { return ( <tr><td>Item 1</td></tr> <tr><td>Item 2</td></tr> ); } }); 第二个例子给出了以下错误： Adjacent XJS elements must be wrapped in an enclosing tag while parsing file 。 我怎样才能渲染两个兄弟元素没有包装在一个<div>或类似的东西？
react.js能够和jQuery / UI组件一起玩吗？
React（和Om的cljs）看起来非常有吸引力，但我想可能是不可能使用非React组件，例如jQuery和jQueryUI与React代码一起在同一页/应用程序。 谁能确认？
