El fragmento de React

Cómo usar React.Fragment para crear etiquetas HTML invisibles

Observa cómo envuelvo los valores de retorno en un div. Esto se debe a que un componente solo puede devolver un único elemento y, si quieres más de uno, debes envolverlo con otra etiqueta contenedora.

Sin embargo, esto genera un error innecesario diven la salida. Puedes evitarlo usando React.Fragment:

import React, { Component, Fragment } from 'react'class BlogPostExcerpt extends Component { render() { return ( React.Fragment h1{this.props.title}/h1 p{this.props.description}/p /React.Fragment ) }}

que también tiene una sintaxis abreviada muy agradable /que solo se admite en versiones recientes (y Babel 7+):

import React, { Component, Fragment } from 'react'class BlogPostExcerpt extends Component { render() { return ( h1{this.props.title}/h1 p{this.props.description}/p / ) }}

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

El fragmento de React

Observa cómo envuelvo los valores de retorno en un div. Esto se debe a que un componente solo puede devolver un único elemento y, si quieres más de uno, deb

programar

es

2025-01-16

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente