Фрагмент реакции

Как использовать React.Fragment для создания невидимых HTML-тегов

Обратите внимание, как я оборачиваю возвращаемые значения вdiv. Это связано с тем, что компонент может возвращать только один единственный элемент, и если вам нужно больше одного, вам нужно заключить его в другой тег контейнера.

Однако это вызывает ненужныйdivна выходе. Вы можете избежать этого, используя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> ) } }

который также имеет очень приятный сокращенный синтаксис<></>который поддерживается только в последних выпусках (и Babel 7+):

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

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

Скачать мою бесплатнуюСправочник по React


Больше руководств по реакции: