Preguntas etiquetadas con jsx

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 debería ser el propType del prop de los niños? Cuando lo configuro como un …

265 reactjs  jsx  react-proptypes 

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 mismo se puede escribir en .jsarchivos …

211 reactjs  jsx 

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 componentWillMount()método lifecyle en un gancho?

176 javascript  reactjs  jsx  react-hooks 

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 hacer. <h{this.props.priority}>Hello</h{this.props.priority}> Rendimiento esperado: <h1>Hello</h1> Esto no está funcionando. ¿Hay algún método posible para …

163 reactjs  jsx 

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 contenido HTML. Sin embargo, se representa como una cadena, no como HTML por alguna …

163 javascript  html  reactjs  jsx 

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} onChange={this.handleChange} /> <input type="text" value={this.state.input2} onChange={this.handleChange} /> </div> ); }, handleChange: function(e){ this.setState({ ??? : e.target.value}); t = …

141 javascript  reactjs  jsx 

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 interface LayoutProps { children: React.ReactNode } const …

137 reactjs  typescript  jsx  typescript2.0 

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 defaultChecked={tile.checked} onCheck={() => this.selectPicture(tile)} style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, …

103 javascript  reactjs  ecmascript-6  jsx  arrow-functions 

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> <hr></hr> Select Scenario:   <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> Select Takeout Scenario:  <select> <option></option> …

101 html  reactjs  jsx 

Tengo un elemento de casilla de verificación TSX (JSX): <input type="checkbox" name={i.toString()} onClick={this.handleCheckboxClick} /> Con la ayuda del código VS, sé que el tipo de parámetro de entrada de this.handleCheckboxClickis MouseEvent<HTMLInputElement>. Entonces lo implementé con: private handleCheckboxClick(event: MouseEvent<HTMLInputElement>) { ... } Luego [ts] Type 'MouseEvent' is not generic.aparece un error …

92 reactjs  typescript  events  types  jsx 

Estoy trabajando en un proyecto con Typescript, React y Redux (todos ejecutándose en Electron), y me he encontrado con un problema cuando incluyo un componente basado en clases en otro y trato de pasar parámetros entre ellos. Hablando libremente, tengo la siguiente estructura para el componente contenedor: class ContainerComponent extends …

91 reactjs  typescript  redux  electron  jsx 

He configurado eslint& eslint-plugin-react. Cuando ejecuto ESLint, el linter devuelve no-unused-varserrores para cada componente de React. Supongo que no reconoce que estoy usando la sintaxis JSX o React. ¿Algunas ideas? Ejemplo: app.js import React, { Component } from 'react'; import Header from './header.js'; export default class App extends Component { …

86 javascript  reactjs  jsx  eslint 

Actualmente estoy construyendo una aplicación de prueba usando React Native. El módulo de imagen, hasta ahora, ha funcionado bien. Por ejemplo, si tuviera una imagen nombrada avatar, el siguiente fragmento de código funciona bien. <Image source={require('image!avatar')} /> Pero pero si lo cambio a una cadena dinámica, obtengo <Image source={require('image!' + …

84 javascript  react-native  jsx 

A diferencia de webstorm, no puedo comentar el código JSX en los .jsarchivos de Visual Studio Code.

81 reactjs  react-native  visual-studio-code  jsx