Questions tagged «reactjs»

我正在使用Javascript（ES6）/ FaceBook做出反应，并尝试获取大小变化的数组的前3个元素。我想做相当于Linq take（n）。 在我的Jsx文件中，我有以下内容： var items = list.map(i => { return ( <myview item={i} key={i.id} /> ); }); 然后得到我尝试的前三个项目 var map = new Map(list); map.size = 3; var items = map(i => { return (<SpotlightLandingGlobalInboxItem item={i} key={i.id} />); }); 这不起作用，因为地图没有设置功能。 你能帮忙吗？

383 javascript  reactjs 

我在（Pete Hunt：React：Rethinking Best Practices-JSConf EU 2013）上看到了一个React开发人员的演讲，演讲者提到对模型进行脏检查可能很慢。但是，由于虚拟DOM在大多数情况下应该比模型更大，难道计算虚拟DOM之间的差异实际上还没有表现得更好吗？ 我真的很喜欢Virtual DOM（尤其是服务器端渲染）的潜在功能，但是我想知道所有的优点和缺点。

372 javascript  dom  reactjs  virtual-dom 

我有一个应用程序，需要动态设置元素的高度（让我们说“ app-content”）。它获取应用程序“ chrome”的高度，然后减去它的高度，然后将“ app-content”的高度设置为在这些限制内适合100％。这对于原始的JS，jQuery或Backbone视图来说非常简单，但是我正在努力弄清楚在React中执行此操作的正确过程是什么？ 下面是一个示例组件。我希望能够将app-content的高度设置为窗口的100％减去ActionBarand 的大小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 …

367 javascript  reactjs 

在当前版本的React Router（v3）中，我可以接受服务器响应并使用 browserHistory.push转到相应的响应页面。但是，这在v4中不可用，我不确定哪种适当的处理方式。 在此示例中，使用Redux，当用户提交表单时，components / app-product-form.js调用this.props.addProduct(props)。服务器返回成功后，该用户将被带到“购物车”页面。 // actions/index.js export function addProduct(props) { return dispatch => axios.post(`${ROOT_URL}/cart`, props, config) .then(response => { dispatch({ type: types.AUTH_USER }); localStorage.setItem('token', response.data.token); browserHistory.push('/cart'); // no longer in React Router V4 }); } 如何从React Router v4的功能重定向到购物车页面？

360 reactjs  react-router  react-router-v4 

我有一个简单的react组件，其形式相信可以控制一个输入： import React from 'react'; export default class MyForm extends React.Component { constructor(props) { super(props); this.state = {} } render() { return ( <form className="add-support-staff-form"> <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/> </form> ) } onFieldChange(fieldName) { return function (event) { this.setState({[fieldName]: event.target.value}); } } } export default MyForm; 运行我的应用程序时，出现以下警告： 警告：MyForm正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换为受控制（反之亦然）。确定在组件的使用寿命中使用受控或不受控制的输入元素 我相信我的输入是有价值的，因此受到控制。我想知道我在做什么错？ …

359 javascript  node.js  reactjs  react-state 

我正在阅读Redux库的文档，其中包含以下示例： 除了读取状态之外，容器组件还可以调度动作。以类似的方式，您可以定义一个名为的函数mapDispatchToProps()，该函数接收dispatch()方法并返回要注入到演示组件中的回调道具。 这实际上是没有意义的。为什么现在mapDispatchToProps已经有需要mapStateToProps？ 他们还提供了以下方便的代码示例： const mapDispatchToProps = (dispatch) => { return { onTodoClick: (id) => { dispatch(toggleTodo(id)) } } } 有人可以用外行的术语解释一下这个功能是什么以及为什么有用吗？

357 reactjs  redux  react-redux 

我的结构如下所示： Component 1 - |- Component 2 - - |- Component 4 - - - |- Component 5 Component 3 组件3应该根据组件5的状态显示一些数据。由于道具是不可变的，因此我不能简单地将其状态保存在组件1中并转发它，对吗？是的，我已经阅读了有关redux的内容，但不想使用它。我希望有可能通过反应来解决。我错了吗？

348 javascript  reactjs  web-deployment 

我是ReactJS和JSX的新手，下面的代码有一些问题。 我试图将多个类添加到className每个属性li： <li key={index} className={activeClass, data.class, "main-class"}></li> 我的React组件是： var AccountMainMenu = React.createClass({ getInitialState: function() { return { focused: 0 }; }, clicked: function(index) { this.setState({ focused: index }); }, render: function() { var self = this; var accountMenuData = [ { name: "My Account", icon: "icon-account" }, { name: "Messages", …

345 javascript  css  reactjs  ecmascript-6 

在组件的render函数中，我有： render() { const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => { return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>); }); return ( <div> ... <ul> {items} </ul> ... </div> ); } 一切正常，但是当单击<li>元素时，出现以下错误： 未捕获的错误：始终违反：对象作为React子对象无效（找到：带有键{dispatchConfig，dispatchMarker，nativeEvent，target，currentTarget，类型，eventPhase，气泡，cancellable，timestamp，defaultPrevented，isTrusted，视图，详细信息，screenX的对象，screenY，clientX，clientY，ctrlKey，shiftKey，altKey，metaKey，getModifierState，按钮，按钮，relatedTarget，pageX，pageY，isDefaultPrevented，isPropagationStopped，_dispatchListeners，_dispatchIDs}）。如果您打算渲染孩子的集合，请使用数组代替，或使用React附加组件中的createFragment（object）包装对象。检查的渲染方法Welcome。 如果我改变this.onItemClick.bind(this, item)对(e) => onItemClick(e, item)地图功能一切正常的内部预期。 如果有人可以解释我做错了什么并解释为什么会出现此错误，那将是很好的 更新1： onItemClick函数如下，删除this.setState导致错误消失。 onItemClick(e, item) { this.setState({ lang: item, }); } 但是我无法删除此行，因为我需要更新此组件的状态

337 javascript  reactjs 

我刚刚react-router从v3 替换为v4。 但是我不确定如何以编程方式在的成员函数中进行导航Component。即在handleClick()功能上我想导航到/path/some/where处理一些数据后。我曾经通过以下方式做到这一点： import { browserHistory } from 'react-router' browserHistory.push('/path/some/where') 但是我在v4中找不到这样的接口。 如何使用v4导航？

336 reactjs  ecmascript-6  react-router-v4 

我想有条件地显示和隐藏此按钮组，具体取决于从父组件传入的内容，如下所示： <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on data } .... var TopicNav = React.createClass({ render: function() { return ( <div className="row"> <div className="col-lg-6"> <div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}"> <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Bulk Actions <span …

333 javascript  css  twitter-bootstrap-3  reactjs  class-attributes 

警告：组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换为受控制（反之亦然）。确定在组件的使用寿命中使用受控或不受控制的输入元素。* 以下是我的代码： constructor(props) { super(props); this.state = { fields: {}, errors: {} } this.onSubmit = this.onSubmit.bind(this); } .... onChange(field, e){ let fields = this.state.fields; fields[field] = e.target.value; this.setState({fields}); } .... render() { return( <div className="form-group"> <input value={this.state.fields["name"]} onChange={this.onChange.bind(this, "name")} className="form-control" type="text" refs="name" placeholder="Name *" /> <span style={{color: "red"}}>{this.state.errors["name"]}</span> </div> ) …

329 javascript  reactjs 

我正在阅读的“ 表单”部分reactjs文档，并尝试使用此代码演示onChange用法（JSBIN）。 var React= require('react'); var ControlledForm= React.createClass({ getInitialState: function() { return { value: "initial value" }; }, handleChange: function(event) { console.log(this.state.value); this.setState({value: event.target.value}); console.log(this.state.value); }, render: function() { return ( <input type="text" value={this.state.value} onChange={this.handleChange}/> ); } }); React.render( <ControlledForm/>, document.getElementById('mount') ); 当我<input/>在浏览器中更新值时，回调console.log内的第二个与第一个handleChange相同，为什么在回调范围内看不到的结果？valueconsole.logthis.setState({value: event.target.value})handleChange

326 javascript  reactjs  react-jsx 

我刚开始使用ReactJS，但对我遇到的问题有些困惑。 我的应用程序本质上是一个带有过滤器的列表和一个用于更改布局的按钮。目前我使用的三个组成部分：<list />，< Filters />和<TopBar />，现在很明显，当我更改设置，在< Filters />我想引起一些方法<list />来更新我的看法。 如何使这三个组件相互交互，或者我需要可以对其进行更改的某种全局数据模型？

321 javascript  reactjs 

我使用React Router的 React.js应用程序具有以下结构： var Dashboard = require('./Dashboard'); var Comments = require('./Comments'); var Index = React.createClass({ render: function () { return ( <div> <header>Some header</header> <RouteHandler /> </div> ); } }); var routes = ( <Route path="/" handler={Index}> <Route path="comments" handler={Comments}/> <DefaultRoute handler={Dashboard}/> </Route> ); ReactRouter.run(routes, function (Handler) { React.render(<Handler/>, document.body); …

315 javascript  properties  reactjs  react-router