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...

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...

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...

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:...

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

¿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 =...

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...

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í...

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 sentido usarla...

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...

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...

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() {...

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?

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

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(){