Tag: reactjs

正确修改ReactJS中的状态数组: 我想添加一个元素到state数组的末尾，这是正确的方法吗？ this.state.arrayvar.push(newelement); this.setState({arrayvar:this.state.arrayvar}); 我担心的是，用push修改arrays可能会造成麻烦 – 是否安全？制作数组副本的替代方法，以及setState ，这看起来很浪费。

如何有条件地向React组件添加属性？: 有没有办法只添加属性到一个React组件，如果满足某些条件？我应该添加必要和readOnly属性基于ajax调用渲染后形成元素，但我不明白如何解决这个，因为readOnly =“false”是不完全相同的省略属性。下面的例子应该解释我想要什么，但不会工作（parsing错误：意外的标识符）。 var React = require('React'); var MyOwnInput = React.createClass({ render: function () { return ( <div> <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/> </div> ); } }); module.exports = React.createClass({ getInitialState: function () { return { isRequired: false } }, componentDidMount: function () { this.setState({ isRequired: true }); }, render: function () { var […]

React JSX：在所选的<select>选项上select“selected”: 在<select>菜单的React组件中，我需要在反映应用程序状态的选项上设置selected属性。在render() ， optionState从状态所有者传递给SortMenu组件。选项值作为JSON的props传入。 render: function() { var options = [], optionState = this.props.optionState; this.props.options.forEach(function(option) { var selected = (optionState === option.value) ? ' selected' : ''; options.push( <option value={option.value}{selected}>{option.label}</option> ); }); // pass {options} to the select menu jsx 但是，这会触发JSX编译时的语法错误。这样做摆脱了语法错误，但显然不能解决问题： var selected = (optionState === option.value) ? 'selected' : 'false'; <option value={option.value} […]

反应“渲染后”的代码？: 我有一个应用程序，我需要设置一个元素的高度（可以说“应用程序内容”）dynamic。它需要应用程序的“chrome”的高度，然后减去它，然后将“app-content”的高度设置为在这些约束内适合100％。这是超级简单的与香草JS，jQuery，或骨干的意见，但我很努力找出什么是正确的过程将在React做到这一点？以下是一个示例组件。我希望能够将app-content的高度设置为窗口的100％减去ActionBar和BalanceBar的大小，但是如何知道什么时候渲染了一切，以及将计算内容放在这个React类中？ /** @jsx React.DOM */ var List = require('../list'); var ActionBar = require('../action-bar'); var BalanceBar = require('../balance-bar'); var Sidebar = require('../sidebar'); var AppBase = React.createClass({ render: function () { return ( <div className="wrapper"> <Sidebar /> <div className="inner-wrapper"> <ActionBar title="Title Here" /> <BalanceBar balance={balance} /> <div className="app-content"> <List items={items} /> </div> </div> […]

React JSX：在报价中访问道具: 在JSX中，如何从引用的属性值中引用来自props值？例如： <img className="image" src="images/{this.props.image}" /> 生成的HTML输出是： <img class="image" src="images/{this.props.image}">

了解React.js中的数组子项的唯一键: 我正在构build一个接受JSON数据源的React组件，并创build一个可sorting的表。每个dynamic数据行都有一个唯一的键分配给它，但我仍然得到一个错误： arrays中的每个孩子应该有一个独特的“钥匙”道具。检查TableComponent的渲染方法。我的TableComponent渲染方法返回： <table> <thead key="thead"> <TableHeader columns={columnNames}/> </thead> <tbody key="tbody"> { rows } </tbody> </table> TableHeader组件是一个单独的行，也有一个唯一的键分配给它。 row中的每一rows都是由一个具有唯一键的组件构build的： <TableRowItem key={item.id} data={item} columns={columnNames}/> TableRowItem看起来像这样： var TableRowItem = React.createClass({ render: function() { var td = function() { return this.props.columns.map(function(c) { return <td key={this.props.data[c]}>{this.props.data[c]}</td>; }, this); }.bind(this); return ( <tr>{ td(this.props.item) }</tr> ) } }); 什么导致唯一的关键支柱错误？

parsing错误：相邻的JSX元素必须封装在封闭的标记中: 我试图设置我的React.js应用程序，以便它只呈现如果我设置的variables是真实的。我的渲染function设置的方式如下所示： render: function() { var text = this.state.submitted ? 'Thank you! Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:'; var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {}; return ( <div> if(this.state.submitted==false) { <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} /> <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}> <div […]

React中的状态和道具有什么区别？: 我正在观看React的Pluralsight课程，导师说道具不应该改变。我现在正在阅读一篇关于道具和状态的文章（uberVU / react-guide），它说道具和状态更改都会触发渲染更新。后来在文章中说：道具（属性的简称）是一个组件的configuration，如果你愿意，它的选项。他们从上面收到而且是不变的。所以道具可以改变，但是它们应该是不变的？什么时候应该使用道具，什么时候使用状态？如果你有React组件需要的数据，是否应该通过道具或通过getInitialState在React组件中设置？

React native与React有什么区别？: 我已经开始学习好奇的反应，想知道这一点。在Google中找不到满意的答案。 React和React native似乎有相同的格式。他们有完全不同的语法吗？

如何有条件的元素，并保持DRY与Facebook React的JSX？: 如何在JSX中select性地包含元素？下面是一个使用横幅的例子，如果它已经被传入，那么我想避免的是在if语句中重复HTML标签。 render: function () { var banner; if (this.state.banner) { banner = <div id="banner">{this.state.banner}</div>; } else { banner = ????? } return ( <div id="page"> {banner} <div id="other-content"> blah blah blah… </div> </div> ); }