Preguntas etiquetadas con react-jsx

Estoy tratando de encontrar la forma correcta de definir algunos componentes que podrían usarse de forma genérica: <Parent> <Child value="1"> <Child value="2"> </Parent> Hay una lógica en curso para la representación entre los componentes principales y secundarios, por supuesto, se puede imaginar <select>y <option>como un ejemplo de esta lógica. Esta …

889 javascript  reactjs  react-jsx 

Tengo un objeto externo (al componente) observable en el que quiero escuchar los cambios. Cuando el objeto se actualiza, emite eventos de cambio, y luego quiero volver a procesar el componente cuando se detecta cualquier cambio. Con un nivel superior React.renderesto ha sido posible, pero dentro de un componente no …

689 reactjs  react-jsx 

Soy consciente de que puede especificar estilos dentro de las clases React, como este: var MyDiv = React.createClass({ render: function() { var style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); ¿Debería apuntar a hacer todo el estilo de …

512 css  reactjs  inline-styles  react-jsx 

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 

Tengo un problema relativamente sencillo al tratar de agregar secuencias de comandos en línea a un componente React. Lo que tengo hasta ahora: 'use strict'; import '../../styles/pages/people.scss'; import React, { Component } from 'react'; import DocumentTitle from 'react-document-title'; import { prefix } from '../../core/util'; export default class extends Component { …

266 javascript  reactjs  ecmascript-6  react-jsx 

¿Cómo incluyo opcionalmente un elemento en JSX? Aquí hay un ejemplo usando un banner que debería estar en el componente si se ha pasado. Lo que quiero evitar es tener que duplicar las etiquetas HTML en la instrucción if. render: function () { var banner; if (this.state.banner) { banner = …

229 javascript  reactjs  react-jsx 

Estoy creando algo con React donde necesito insertar HTML con React Variables en JSX. ¿Hay alguna manera de tener una variable como esta? var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>'; e insertarlo en reaccionar así, ¿y hacer que funcione? render: function() { return ( <div className="content">{thisIsMyCopy}</div> ); } y …

204 javascript  html  frontend  reactjs  react-jsx 

Estoy tratando de representar dinámicamente componentes en función de su tipo. Por ejemplo: var type = "Example"; var ComponentName = type + "Component"; return <ComponentName />; // Returns <examplecomponent /> instead of <ExampleComponent /> Probé la solución propuesta aquí React / JSX nombres de componentes dinámicos Eso me dio un …

168 javascript  reactjs  react-jsx 

Estoy tratando de convertir un componente jQuery a React.js y una de las cosas con las que tengo dificultades es representar un número n de elementos basados ​​en un bucle for. Entiendo que esto no es posible o recomendado y que cuando existe una matriz en el modelo, tiene mucho …

146 javascript  jquery  reactjs  react-jsx 

Acabo de comenzar a explorar React, agregando un componente con una función de renderizado simple: render() { return <div class="myApp"></div> } Cuando ejecuto la aplicación, aparece el siguiente error: Warning: Unknown DOM property class. Did you mean className? Puedo resolver esto cambiando class a className. La pregunta es; React hace …

113 javascript  reactjs  react-jsx 

Estoy tratando de comenzar a construir un sitio en ReactJS. Sin embargo, cuando traté de poner mi JS en un archivo separado, comencé a recibir este error: "Error de sintaxis no detectado: token inesperado <". Intenté agregar /** @jsx React.DOM */a la parte superior del archivo JS, pero no solucionó …

110 javascript  html  reactjs  react-jsx 

Tengo un archivo test_stuff.js con el que estoy ejecutando npm test Se parece mucho a esto: import { assert } from 'assert'; import { MyProvider } from '../src/index'; import { React } from 'react'; const myProvider = ( <MyProvider> </MyProvider> ); describe('Array', function() { describe('#indexOf()', function() { it('should return -1 …

101 javascript  reactjs  npm  react-jsx 

Estoy usando Sublime Text como editor de texto. Hay un jsFormat para formatear archivos javascript pero no puedo encontrar uno para JSX. ¿Cómo lidian con el formateo de JSX?

91 reactjs  sublimetext  react-jsx 

Entiendo cómo (y por qué ) agregar un espacio en blanco en JSX, pero me pregunto cuál es la mejor práctica o si alguna marca una diferencia real. Envuelva ambos elementos en un tramo <div className="top-element-formatting"> <span>Hello </span> <span className="second-word-formatting">World!</span> </div> Agréguelos en una línea <div className="top-element-formatting"> Hello <span className="second-word-formatting">World!</span> …

91 javascript  reactjs  react-jsx 

Quiero enlazar para cerrar la escapeventana emergente de arranque de reacción activa al presionar. Aquí está el código _handleEscKey:function(event){ console.log(event); if(event.keyCode == 27){ this.state.activePopover.hide(); } }, componentWillMount:function(){ BannerDataStore.addChangeListener(this._onchange); document.addEventListener("click", this._handleDocumentClick, false); document.addEventListener("keyPress", this._handleEscKey, false); }, componentWillUnmount: function() { BannerDataStore.removeChangeListener(this._onchange); document.removeEventListener("click", this._handleDocumentClick, false); document.removeEventListener("keyPress", this._handleEscKey, false); }, Pero no se registra …

82 reactjs  react-jsx  react-bootstrap