El fragmento de reacción

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

Observe cómo envuelvo los valores de retorno en undiv. Esto se debe a que un componente solo puede devolver un único elemento y, si desea más de uno, debe envolverlo con otra etiqueta de contenedor.

Sin embargo, esto causa una innecesariadiven la salida. Puede evitar esto usandoReact.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 muy buena sintaxis taquigráfica<></>que es compatible solo 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> </> ) } }

Descarga mi gratisReact Handbook


Más tutoriales de react: