Le fragment de réaction

Comment utiliser React.Fragment pour créer des balises HTML invisibles

Remarquez comment j'emballe les valeurs de retour dans undiv. En effet, un composant ne peut renvoyer qu'un seul élément et si vous en voulez plus d'un, vous devez l'envelopper avec une autre balise conteneur.

Cela provoque cependant undivdans la sortie. Vous pouvez éviter cela en utilisantReact.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> ) } }

qui a également une très belle syntaxe abrégée<></>qui n'est pris en charge que dans les versions récentes (et Babel 7+):

import React, { Component, Fragment } from 'react'

class BlogPostExcerpt extends Component { render() { return ( <> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </> ) } }

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: