Tag: reactjs

Flux + React vs Backbone + React

Flux + React比Backbone + React有什么优势? 除了庞大的复杂代码库的代码开发缓解之外,是否还有性能差异? 如果我们在使用Backbone + React的应用程序中的模型和反应视图之间存在1:1的关系呢?

ReactJS findDOMNode和getDOMNode不是函数

我正在构build与ReactJS和Flux的Web应用程序,我试图使用方法findDOMNode获取我当前的div的节点,我得到下一个错误: Uncaught TypeError: React.findDOMNode is not a function 所以,我试图使用getDOMNode ,我得到了非常相同的错误: Uncaught TypeError: React.getDOMNode is not a function 我使用npm来构buildJS,我使用这些方法的代码: var React = require('react'); var stores = require('../stores'); var MessagesUserContainer = require('./messageusercontainer'); var ChatStore = stores.ChatStore; var owner = stores.getOwner(); var MessagesList = React.createClass({ getInitialState: function(){ return {'muc': []}; }, componentDidUpdate: function(){ var node = React.findDOMNode(this); //Error […]

React.Component与React.createClass

我很困惑组件和反应类之间的区别是什么? 什么时候在一个反应​​类上使用一个组件? 看起来像一个组件是一个类,createClass创build一个组件。 https://facebook.github.io/react/docs/top-level-api.html React.Component 这是React Components使用ES6类定义的基类。 有关如何使用React的ES6类,请参阅可重用组件。 对于基类实际提供的方法,请参阅组件API。 React.createClass 根据规范创build一个组件类。 一个组件实现一个返回一个单独的孩子的渲染方法。 那个孩子可能有一个任意深的孩子结构。 使组件与标准原型类不同的一件事是,你不需要对它们调用新的东西。 他们是方便包装,为您构build支持实例(通过新的)。

componentDidUpdate()中的setState()

我正在编写一个脚本,根据下拉的高度和input在屏幕上的位置,在下方或上方移动下拉菜单。 另外我想根据其方向设置下拉菜单。 但是,使用componentDidUpdate内部的setState创build一个无限循环(这是显而易见的) 我已经find了一个解决scheme,使用getDOMNode和设置classname直接下拉,但我觉得应该有一个更好的解决scheme,使用React工具。 有谁能够帮助我? 这里是getDOMNode的工作代码的一部分(ia一点点被忽略的定位逻辑来简化代码) let SearchDropdown = React.createClass({ componentDidUpdate(params) { let el = this.getDOMNode(); el.classList.remove('dropDown-top'); if(needToMoveOnTop(el)) { el.top = newTopValue; el.right = newRightValue; el.classList.add('dropDown-top'); } }, render() { let dataFeed = this.props.dataFeed; return ( <DropDown > {dataFeed.map((data, i) => { return (<DropDownRow key={response.symbol} data={data}/>); })} </DropDown> ); } }); 这里是setstate的代码(创build一个无限循环) let SearchDropdown = […]

传入类名称来响应组件

我试图传递一个类名到一个反应组件来改变它的风格,似乎无法工作: class Pill extends React.Component { render() { return ( <button className="pill {this.props.styleName}">{this.props.children}</button> ); } } <Pill styleName="skill">Business</Pill> 我试图通过传递具有各自风格的class级名称来改变药丸的风格。 我对React是新手,所以也许我没有这样做。 谢谢

setState(…):只能更新已安装或已安装的组件。 这通常意味着您在卸载的组件上调用了setState()。 这是一个没有操作

componentDidMount(prevProps, prevState, prevContext) { let [audioNode, songLen] = [this.refs.audio, List.length-1]; audioNode.addEventListener('ended', () => { this._endedPlay(songLen, () => { this._currSong(this.state.songIndex); this._Play(audioNode); }); }); audioNode.addEventListener('timeupdate', () => { let [remainTime, remainTimeMin, remainTimeSec, remainTimeInfo] = []; if(!isNaN(audioNode.duration)) { remainTime = audioNode.duration – audioNode.currentTime; remainTimeMin = parseInt(remainTime/60); // 剩余分 remainTimeSec = parseInt(remainTime%60); // 剩余秒 if(remainTimeSec < 10) { remainTimeSec […]

在React Native中需要镜像模块时遇到问题

刚刚开始使用React-Native ,我遇到了一些需要静态图像的麻烦。 以下是我迄今为止的基本代码: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, Image, View, } = React; var buzz = React.createClass({ render: function() { return ( <View style={styles.container}> <Image source={require('image!bg')} style={styles.bg}> <Text style={styles.welcome}> Welcome to Buzz! iOS interface to </Text> <Text style={styles.welcomeHeader}>Charityware</Text> </Image> </View> ); } }); var styles = StyleSheet.create({ container: { […]

在React Native中查看父级的80%宽度

我在React Native中创build了一个表单,并希望使我的TextInput成为屏幕宽度的80%。 用HTML和普通的CSS,这将是直截了当的: input { display: block; width: 80%; margin: auto; } 除了React Native不支持display属性,百分比宽度或自动页边距。 那我该怎么做呢? 在React Native的问题跟踪器中有一些关于这个问题的讨论,但是提出的解决scheme看起来像是讨厌的黑客。

组件不会在NavigatorIOS – React Native内渲染

我无法得到这个简单的NavigatorIOStesting工作。 控制台login我的视图triggeres,我可以得到它,如果我跳过NavigatorIOS组件,并直接呈现MyView呈现。 但是,当从NavigatorIOS组件中的组件触发MyView时,它将不会呈现“我的导航器IOStesting”以外的任何内容。 var React = require('react-native'); var { AppRegistry, StyleSheet, NavigatorIOS, Text, View, } = React; var navigation = React.createClass ({ render: function() { return ( <NavigatorIOS initialRoute={{ component: MyView, title: 'My NavigatorIOS test', passProps: { myProp: 'foo' }, }}/> ); }, }); var MyView = React.createClass({ render: function(){ console.log('My View render triggered'); return […]

在react.js中呈现后,滚动到页面的顶部

我有一个问题,我没有任何想法,如何解决。 在我的反应组件中,我在底部显示一长串数据和几个链接。 点击任何链接后,我将填入新的链接列表,并需要滚动到顶部。 问题是 – 如何在新的集合呈现后滚动到顶端? 'use strict'; // url of this component is #/:checklistId/:sectionId var React = require('react'), Router = require('react-router'), sectionStore = require('./../stores/checklist-section-store'); function updateStateFromProps() { var self = this; sectionStore.getChecklistSectionContent({ checklistId: this.getParams().checklistId, sectionId: this.getParams().sectionId }).then(function (section) { self.setState({ section, componentReady: true }); }); this.setState({componentReady: false}); } var Checklist = React.createClass({ mixins: [Router.State], […]