Tag: reactjs

使用ReactJS的优点和缺点: 我是使用React进行开发的新手。有人可以列举使用ReactJS的优点和缺点。在大型项目中使用此库时是否存在性能问题？

ReactJS：在子组件内的父级上的setState: 从子组件对父进行setState的build议模式是什么？ var Todos = React.createClass({ getInitialState: function() { return { todos: [ "I am done", "I am not done" ] } }, render: function() { var todos = this.state.todos.map(function(todo) { return <div>{todo}</div>; }); return <div> <h3>Todo(s)</h3> {todos} <TodoForm /> </div>; } }); var TodoForm = React.createClass({ getInitialState: function() { return { todoInput: "" } }, […]

什么是一个react.js友好的方式来animation列表重新sorting？: 我有一个项目列表，按分数sorting，由react.js呈现为垂直方向的矩形项目列表（最高分）。对单个项目的盘旋和其他点击可以显示/隐藏额外的信息，改变它们的垂直高度。新的信息到达，稍微改变分数，使得一些项目在重新sorting之后排名更高，而其他更低。我希望这些物品能够同时生成新的位置，而不是立即出现在新的位置。在React.js中是否有推荐的方法来做到这一点，也许有一个stream行的附加？（在使用D3的类似的过去的情况下，我使用的技术大致是：按照自然顺序显示具有项目DOM节点的列表，并进行相对定位。在相对定位的情况下，其他小的变化 – CSS或JS触发 – 个别项目的范围将按预期转移其他人。在一个步骤中，使所有的DOM节点都变为实际的相对坐标作为新的绝对坐标 – 一个DOM变化，不会引起视觉变化。在其父代中，将项目DOM节点重新sorting为新的sorting顺序 – 另一个DOM更改不会导致可视的更改。根据新sorting中所有前面项目的高度，将所有节点的顶部偏移量animation到新的计算值。这是唯一直观的步骤。将所有项目的DOM节点变回无偏移的相对定位。同样，这不会导致视觉上的改变，但是现在相对定位的DOM节点，在底层列表的自然顺序中，将通过适当的移位来处理内部hover/展开/ etc样式的改变。现在我希望以React-ish的方式获得类似的效果…）

在js中做API调用的正确方法是什么？: 我最近从Angular转到ReactJs。我正在使用JQUERY进行API调用。我有一个API给随机的用户列表，我必须在列表中打印。我不知道如何编写我的API调用。那最好的做法是什么？我尝试过，但我没有得到输出。我打开实施其他库也用于API调用。以下是我的代码。 import React from 'react'; export default class UserList extends React.Component { constructor(props) { super(props); this.state = { person: [] }; } UserList(){ return $.getJSON('https://randomuser.me/api/') .then(function(data) { return data.results; }); } render() { this.UserList().then(function(res){ this.state = {person: res}; }); return ( <div id="layout-content" className="layout-content-wrapper"> <div className="panel-list"> {this.state.person.map((item, i) […]

获取Facebook的react.js库JSX语法与jslint很好地玩？: 我正在玩Facebook的react.js库。我正在尝试使用他们的JSX语法来描述如何创build一个视图。 /** @jsx React.DOM */ var HelloMessage = React.createClass({ render: function() { return <div>{'Hello ' + this.props.name}</div>; } }); React.renderComponent(<HelloMessage name="John" />, mountNode); JSLint显然不喜欢这个（“期待一个标识符，而是看到'<';” – JavaScript语法错误），所以我怎么解决这个在我的.jshintrc文件？

Reactjs中{… this.props}的含义是什么？: 是什么意思 {…this.props} 我正在尝试使用它 <div {…this.props}> Content Here </div>

如何在React Native中添加button？: 我对这个“没有CSS”的东西感到困惑，但是我明白为什么它是有益的。我想要做的只是在屏幕中间放置一个button，但是我不明白React的样式是如何工作的。这是我的代码： var tapSpeed = React.createClass({ render: function() { return ( <View style={styles.container}> <Text style={styles.welcome}> Tap me as fast as you can! </Text> <View style={styles.button}> ! </View> </View> ); } }); var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFCCCC' }, welcome: { fontSize: 20, textAlign: 'center', margin: 10 […]

如何用转换创build一个React模态（附加到`<body>`）？: 在这个答案中有一个模式，通过将它附加到<body>来创build一个基于React的模态。但是，我发现它与React提供的过渡插件不兼容。如何创build一个与转换（在进入和离开）？

卸载React.js节点: 我试图用this._rootNodeID卸载一个React.js节点 handleClick: function() { React.unmountComponentAtNode(this._rootNodeID) } 但是它返回false 。当点击一个元素时会触发handleClick ，并且应该卸载根节点。关于unmountComponentAtNode文档在这里我也试过这个： React.unmountComponentAtNode（$（ '* [数据reactid = “ '+ this._rootNodeID +”']'）[0]）该select器与jQuery.hide() ，但不能卸载它，而文档声明它应该是一个DOMElement ，就像你将用于React.renderComponent 经过几次更多的testing后发现它可以在某些元素/select器上工作。它以某种方式与select器一起工作： document.getElementById('maindiv') ，其中maindiv是一个不与React.js生成的元素，只是纯html。然后它返回true 。但只要我尝试并select与React.js生成不同的ElementById它将返回false。它也不会与document.body工作，尽pipe它们本质上都是返回相同的东西，如果我console.log它们（ getElementsByClassName('bla')[0]也不起作用）应该有一个简单的方法来select通过this节点，而不必诉诸于jQuery或其他select器，我知道它在那里..

Redux中mapToDispatchToProps（）的参数时，“dispatch”不是函数: 我是一个javascript / redux /反应初学者构build一个小应用程序与redux，react-redux，和反应。出于某种原因，当使用mapDispatchToProps函数与connect（react-redux绑定）结合使用时，我收到一个TypeError，指示当我尝试执行生成的prop时dispatch不是函数。当我调用dispatch作为道具时（参见提供的代码中的setAddr函数）。我很好奇这是为什么，在Reduce文档的示例TODO应用程序中，mapDispatchToProps方法是以相同的方式设置的。当我在console.log（调度）函数里面说调度是types对象。我可以继续使用dispatch这种方式，但我会更好地知道为什么会发生这种情况，然后再继续使用redux。我正在使用webpack与babel-loaders进行编译。我的代码： import React, { PropTypes, Component } from 'react'; import { connect } from 'react-redux'; import { setAddresses } from '../actions.js'; import GeoCode from './geoCode.js'; import FlatButton from 'material-ui/lib/flat-button'; const Start = React.createClass({ propTypes: { onSubmit: PropTypes.func.isRequired }, setAddr: function(){ this.props.dispatch( setAddresses({ pickup: this.refs.pickup.state.address, dropoff: […]