Preguntas etiquetadas con 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

Dado un componente simple que representa a sus hijos: class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent; Pregunta: ¿Cuál...

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

Hay algo que encuentro muy confuso cuando trabajo React. Hay muchos ejemplos disponibles en Internet que usan .jsarchivos con react pero muchos otros usan .jsxarchivos. He leído sobre .jsxarchivos y entiendo que simplemente te permiten escribir etiquetas html dentro de tu javascript. Pero lo...

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

En los documentos oficiales de React menciona: Si está familiarizado con los métodos de ciclo de vida de la clase React, puede pensar en useEffect Hook como componentDidMount, componentDidUpdate y componentWillUnmount combinados. Mi pregunta es: ¿cómo podemos usar el

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

Intento escribir un componente Reaccionar. para etiquetas de encabezado html (h1, h2, h3, etc.), donde la prioridad del encabezado cambia dinámicamente en función de la prioridad que hemos definido en los accesorios. Aquí lo que intento

Esto es lo que probé y cómo sale mal. Esto funciona: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> Esto no: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> La propiedad de descripción es solo una cadena normal de...

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

Curioso sobre cuál es la forma correcta de abordar esto: var Hello = React.createClass({ getInitialState: function() { return {total: 0, input1:0, input2:0}; }, render: function() { return ( <div>{this.state.total}<br/> <input type="text" value={this.state.input1}...

Tengo un componente funcional muy simple de la siguiente manera: import * as React from 'react'; export interface AuxProps { children: React.ReactNode } const aux = (props: AuxProps) => props.children; export default aux; Y otro componente: import * as React from "react"; export...

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

Estoy ejecutando lint con mi aplicación React y recibo este error: error JSX props should not use arrow functions react/jsx-no-bind Y aquí es donde estoy ejecutando la función de flecha (adentro onClick): {this.state.photos.map(tile => ( <span key={tile.img}> <Checkbox...

Estoy usando la etiqueta & nbsp en jsx y no representa el espacio. El siguiente es un pequeño fragmento de mi código. Por favor, ayuda. var Reporting=React.createClass({ render: function(){ return( <div style={divPositionReporting}> <p>Pricing Reports</p>...