Tag: reactjs

反应本地 – 预期一个组件类，得到

当我尝试使用我创build的loginPage组件时，我期望组件类有对象错误。 这里是index.ios.js import React, {Component} from 'react'; import { AppRegistry, View } from 'react-native'; import loginPage from './pages/loginPage' class app extends Component { render() { return ( <View> <loginPage/> </View> ); } } AppRegistry.registerComponent('app', () => app); 这里是loginPage.js import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default […]

React Native：没有原生支撑RCTView.maxHeight的propType

升级到RN 0.30后，即使构build最简单的应用程序，我也开始看到下面显示的错误： react-native init AwesomeProject react-native run-ios 最奇怪的是组件BlurView ， BlurView和RNSearchBar包含在警告消息中，尽pipe项目不使用它们。 重新编译/清理项目并不能解决问题。 控制台和错误： 2016-07-22 08:48:02.985 [warn][tid:main][RCTEventEmitter.m:52] Sending `websocketFailed` with no listeners registered. 2016-07-22 08:48:03.031 [warn][tid:com.facebook.react.JavaScript] Warning: Native component for "BlurView" does not exist 2016-07-22 08:48:03.032 [warn][tid:com.facebook.react.JavaScript] Warning: Native component for "VibrancyView" does not exist 2016-07-22 08:48:03.033 [warn][tid:com.facebook.react.JavaScript] Warning: Native component for "RNSearchBar" does not exist 2016-07-22 […]

如何从material-ui TextField，DropDownMenu组件获取数据？

我创build表单，我有几个TextField，包括DropDownMenu材质的UI组件，问题是我如何从所有的TextFields，DropDownMenus在一个OBJ收集所有的数据，并将其发送到服务器上。 对于TextField，它有TextField.getValue（）返回input的值。 但我不知道如何使用它。 var React = require('react'), mui = require('material-ui'), Paper = mui.Paper, Toolbar = mui.Toolbar, ToolbarGroup = mui.ToolbarGroup, DropDownMenu = mui.DropDownMenu, TextField = mui.TextField, FlatButton = mui.FlatButton, Snackbar = mui.Snackbar; var menuItemsIwant = [ { payload: '1', text: '[Select a finacial purpose]' }, { payload: '2', text: 'Every Night' }, { payload: '3', text: […]

未捕获的ReferenceError：未定义React

我正在尝试使用本教程来使ReactJS在rails中工作。 我得到这个错误： Uncaught ReferenceError: React is not defined 但是我可以在浏览器控制台中访问React对象 我还join了public / dist / turbo-react.min.js ，并且在application.js中添加了//= require components行，就像这个答案中描述的那样 ，没有运气。 另外， var React = require('react')给出错误： Uncaught ReferenceError: require is not defined 任何人都可以build议我如何解决这个问题？ [编辑1] 源代码供参考： 这是我的comments.js.jsx文件： var Comment = React.createClass({ render: function () { return ( <div className="comment"> <h2 className="commentAuthor"> {this.props.author} </h2> {this.props.comment} </div> ); } }); var […]

React native：获取当前scrollview的滚动位置

是否有可能得到当前的滚动位置，或当前页面的<ScrollView>组件反应原生？ 所以像这样： <ScrollView horizontal={true} pagingEnabled={true} onScrollAnimationEnd={() => { // get this scrollview's current page or x/y scroll position }}> this.state.data.map(function(e, i) { <ImageCt key={i}></ImageCt> }) </ScrollView>

这是使用redux删除项目的正确方法吗？

我知道我不应该改变input，应该克隆对象来改变它。 我正在遵循一个使用了redux启动器项目的惯例： ADD_ITEM: (state, action) => ({ …state, items: […state.items, action.payload.value], lastUpdated: action.payload.date }) 添加一个项目 – 我得到使用传播追加数组中的项目。 删除我用过的： DELETE_ITEM: (state, action) => ({ …state, items: […state.items.splice(0, action.payload), …state.items.splice(1)], lastUpdated: Date.now() }) 但是这是突变的input状态对象 – 这是禁止的，即使我正在返回一个新的对象？

为什么我们需要单页面应用程序？

单页应用程序 （SPA）已经到了我们面前。 还有很多新的东西，比如路由，客户端的页面生命周期，MVC模式，MVVM模式，MV *模式，以及一些Javascript模式，像AMD模式 ， Singleton ， Facade ，.. 许多SPA框架和图书馆也被开发出来。 我们可以在互联网上find它的一些。 他们是AngularJs ， Reactjs ， BackboneJs ， DurandalJs ，以及很多第三方组件，使得Javascript编码更加简单，就像RequireJs ， Amplifyjs ， BreezeJs … 但我只是想为什么我们需要SPA？ 因为它被看作是在开发Web应用程序中引入一些新的复杂的东西。 尽pipeSPA，我们可以使用传统的Web应用程序，每个请求每个加载页面。 我只是看到一个好处，就像我们可以很容易地在移动设备上运行它，并适应新的Web应用程序发展趋势。 有人能解释得更清楚吗？ 还有一件事，如果我们使用大量的第三方组件来组成一个SPA。 那么它是否为这个Web应用程序保持一致？ 我认为它应该使我们的Web应用程序内维护一个巨大的组件复杂。 你怎么想的？ 所有的build议都欢迎。

Webpack装载机与插件; 有什么不同？

webpack中的加载器和插件有什么区别？ 插件的文档只是说： 使用插件添加通常与webpack中捆绑相关的function。 我知道babel使用jsx / es2015转换器的加载器，但是看起来像其他常见任务（例如copy-webpack-plugin）使用插件。

如何优化React + Redux中嵌套组件的小道具更新？

示例代码： https ： //github.com/d6u/example-redux-update-nested-props/blob/master/one-connect/index.js 观看现场演示： http : //d6u.github.io/example-redux-update-nested-props/one-connect.html 如何优化嵌套组件的道具的小更新？ 我有上面的组件，回购和RepoList。 我想更新第一个回购的标签（ 第14行 ）。 所以我派出了一个UPDATE_TAG动作。 在我实现了shouldComponentUpdate之前，调度需要大约200ms，这是预料之中的，因为我们正在浪费大量时间差异<Repo/> s没有改变。 添加shouldComponentUpdate ，调度需要大约30ms。 在生产生成React.js之后，更新仅花费约17ms。 这是好得多，但在Chrome开发控制台的时间表视图仍然表明无框架（超过16.6毫秒）。 想象一下，如果我们有这样的更新，或者<Repo/>比现在更复杂，我们将无法保持60fps。 我的问题是，对于嵌套组件的道具的这种小的更新，是否有更高效和规范的方式来更新内容？ 我还可以使用Redux吗？ 我得到了一个解决scheme，用一个可观察的内部减速器replace每个tags 。 就像是 // inside reducer when handling UPDATE_TAG action // repos[0].tags of state is already replaced with a Rx.BehaviorSubject get('repos[0].tags', state).onNext([{ id: 213, text: 'Node.js' }]); 然后我使用https://github.com/jayphelps/react-observable-subscribe在Repo组件里订阅它们的值。 这很好。 即使有React.js的开发版本，每个调度也只需要5ms。 但是我觉得这是Redux中的反模式。 更新1 […]

为什么ref ='string'是“legacy”？

在React文档中他们说： React还支持使用string（而不是callback函数 ）作为任何组件的引用，尽pipe这种方法在这一点上大部分是遗留的 。 https://facebook.github.io/react/docs/more-about-refs.html 以下面的例子： class Foo extends Component { render() { return <input onClick={() => this.action()} ref={input => this._input = input} />; } action() { console.log(this._input.value); } } 为什么我应该喜欢这个，而不是： class Foo extends Component { render() { return <input onClick={() => this.action()} ref='input' />; } action() { console.log(this.refs.input.value); } } ？ 第二个例子看起来更干净简单。 是否有风险，string方法将被弃用？ 注意 […]