Preguntas etiquetadas con react-jsx

React es una biblioteca de JavaScript para crear interfaces de usuario. Utiliza un paradigma declarativo basado en componentes y tiene como objetivo ser eficiente y flexible.

24
Cómo pasar accesorios a {this.props.children}
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 …


19
Mejores prácticas de estilo en línea de React.js
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 …

6
¿Por qué llamar al método react setState no muta el estado inmediatamente?
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 …

16
Agregar etiqueta de script a 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 { …


8
Insertar HTML con React Variable Statements (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 …

12
Nombre de componente dinámico 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 …






9
Mejores prácticas al agregar espacios en blanco en 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> …

6
Escuche la pulsación de tecla para el documento en reactjs
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 …
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.