Preguntas etiquetadas con reactjs

Estoy trabajando con Javascript (ES6) / FaceBook react y estoy tratando de obtener los primeros 3 elementos de una matriz que varía en tamaño. Me gustaría hacer el equivalente de Linq take (n). En mi archivo Jsx tengo lo siguiente: var items = list.map(i => { return ( <myview item={i} …

387 javascript  reactjs 

Vi una charla de desarrollo de React en ( Pete Hunt: React: repensar las mejores prácticas - JSConf EU 2013 ) y el orador mencionó que la verificación sucia del modelo puede ser lenta. Pero, ¿no es el cálculo de la diferencia entre DOM virtuales en realidad incluso menos eficaz …

372 javascript  dom  reactjs  virtual-dom 

Tengo una aplicación donde necesito establecer la altura de un elemento (digamos "contenido de la aplicación") dinámicamente. Toma la altura del "cromo" de la aplicación y la resta y luego establece la altura del "contenido de la aplicación" para que se ajuste al 100% dentro de esas restricciones. Esto es …

367 javascript  reactjs 

En la versión actual de React Router (v3) puedo aceptar una respuesta del servidor y usarla browserHistory.pushpara ir a la página de respuesta apropiada. Sin embargo, esto no está disponible en v4, y no estoy seguro de cuál es la forma adecuada de manejar esto. En este ejemplo, usando Redux, …

361 reactjs  react-router  react-router-v4 

Tengo un componente de reacción simple con la forma que creo que tiene una entrada controlada: 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) { …

360 javascript  node.js  reactjs  react-state 

Estaba leyendo la documentación de la biblioteca Redux y tiene este ejemplo: Además de leer el estado, los componentes del contenedor pueden enviar acciones. De manera similar, puede definir una función llamada mapDispatchToProps()que recibe el dispatch()método y devuelve los accesorios de devolución de llamada que desea inyectar en el componente …

358 reactjs  redux  react-redux 

Mi estructura se ve de la siguiente manera: Component 1 - |- Component 2 - - |- Component 4 - - - |- Component 5 Component 3 El componente 3 debería mostrar algunos datos dependiendo del estado del componente 5. Dado que los accesorios son inmutables, no puedo simplemente guardar …

350 javascript  reactjs  web-deployment 

Soy nuevo en ReactJS y JSX y tengo un pequeño problema con el código a continuación. Estoy tratando de agregar varias clases al classNameatributo en cada una li: <li key={index} className={activeClass, data.class, "main-class"}></li> Mi componente Reaccionar es: var AccountMainMenu = React.createClass({ getInitialState: function() { return { focused: 0 }; }, …

346 javascript  css  reactjs  ecmascript-6 

En la función de render de mi componente tengo: 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> ); } todo funciona bien, sin embargo, al hacer clic en el <li>elemento, recibo …

337 javascript  reactjs 

Acabo de reemplazar react-routerde v3 a v4. Pero no estoy seguro de cómo navegar mediante programación en la función miembro de a Component. es decir, en la handleClick()función que quiero navegar /path/some/wheredespués de procesar algunos datos. Solía ​​hacer eso por: import { browserHistory } from 'react-router' browserHistory.push('/path/some/where') Pero no puedo …

336 reactjs  ecmascript-6  react-router-v4 

Quiero mostrar y ocultar condicionalmente este grupo de botones dependiendo de lo que se pasa del componente principal que se ve así: <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on data } .... var TopicNav = React.createClass({ render: function() { return ( <div …

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

Advertencia: Un componente está cambiando una entrada no controlada de texto de tipo a controlar. Los elementos de entrada no deben cambiar de no controlado a controlado (o viceversa). Decida entre usar un elemento de entrada controlado o no controlado durante la vida útil del componente. * El siguiente es …

332 javascript  reactjs 

Estoy leyendo la sección de formularios dereaccionardocumentación y acabo de probar este código para demostrar el onChangeuso ( 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 …

326 javascript  reactjs  react-jsx 

Acabo de comenzar con ReactJS y estoy un poco atascado en un problema que tengo. Mi aplicación es esencialmente una lista con filtros y un botón para cambiar el diseño. Por el momento estoy usando tres componentes: <list />, < Filters />y <TopBar />, ahora, obviamente, cuando cambio de configuración …

321 javascript  reactjs 

Estoy teniendo el siguiente error TypeError no capturado: no se puede leer la propiedad 'setState' de undefined incluso después de enlazar delta en el constructor. class Counter extends React.Component { constructor(props) { super(props); this.state = { count : 1 }; this.delta.bind(this); } delta() { this.setState({ count : this.state.count++ }); } …

316 javascript  reactjs