Як react.fragment допомагає писати семантичний HTML?

5 хв. читання
import React, { Fragment } from "react"

const Headings = props => {
	return (
		<Fragment>
			<h1>{props.title}</h1>
			<p>{props.subtitle}</p>
		</Fragment>
	)
}

HTML це основа вебу, тому написаний вами код має буди семантичним.

Якщо ви пишете семантичний HTML, то його буде легше читати, а також простіше визначити, чого саме прагнув досягти розробник.

Погляньте на приклади семантичного та не семантичного HTML.

Не семантичний HTML:

<body>
  <div>
    <h1>Привіт!</h1>
  </div>
  <div>
   <p>
     Я люблю HTML
   </p>
  </div>
  <div>
    <span>Copyright</span>
  </div>
</body>

Cемантичний HTML:

<body>
  <header>
    <h1>Привіт!</h1>
  </header>
  <main>
   <p>
     Я люблю HTML
   </p>
  </main>
  <footer>
    <span>Copyright</span>
  </footer>
</body>

Такий код робить ваш сайт більш доступним для людей з обмеженими можливостями. Спеціальна програма — скрінрідер зчитує код сторінки й озвучує його для користувача. Замість div з купою якорів, набагато корисніше буде почути, що цей елемент — це саме хедер сайту і що він містить у собі елементи навігації.

За останній рік зросла кількість веб-застосунків, які використовують React.js. Методика React передбачає написання самостійних компонентів, які виглядають як HTML, але написані вони з JSX, тобто теги HTML знаходяться у JavaScript коді.

< React 16.2

Версії, що передували React 16.2 вимагали, щоб кожен компонент повертав лише один елемент HTML, який містив у собі дочірні елементи.

Тобто так ви зробити не зможете:

const Heading = props => {
  return (
    <h1>{props.title}</h1>
    <p>{props.subtitle}</p>
  )
}

ReactDOM.render(<Heading title="wow" subtitle="very react"/>, document.getElementById("main"))

Вам необхідно буде «загорнути» всі дочірні елементи у батьківський:

const Header = props => {
  return (
    <header>
      <h1>{props.title}</h1>
      <p>{props.subtitle}</p>
    </header>
  )
}

ReactDOM.render(<Header title="wow" subtitle="very react"/>, document.getElementById("main"))

Через необхідність обертати елементи таким чином, було написано багато подібного коду:

<div>
  <h1>Todo List</h1>
  <div>
    Todo Items
    <div>
      <div>
        <h2>Todo Title</h2>
        <p>Todo Project</p>
      </div>
      <div>
        Todo Content
        <div>
          Todo Author
          Todo Date Created
        </div>
      </div>
    </div>
    <div>
      <div>
        <h2>Todo Title</h2>
        <p>Todo Project</p>
      </div>
      <div>
        Todo Content
        <div>
          Todo Author
          Todo Date Created
        </div>
      </div>
    </div>
  </div>
</div>

Забагато div, чи не так?

Через те, що компоненти, які відображаються в HTML, знаходяться в ізоляції, нам простіше огорнути елементи у <div/>, і забути про них. Зазвичай ми ігноруємо згенерований HTML, і надаємо перевагу ззовні привабливішому вигляду компонентів, який ми отримуємо від React Developer Tools.

React 16.2+

Одним з нововведень React 16.2 була можливість рендерити масив елементів не огортаючи їх у батьківський.

const Headings = props => {
  return [<h1>{props.title}</h1>, <p>{props.subtitle}</p>]
}

Тепер він буде виводити елементи, проте цей код виглядає не як HTML, і навряд чи ви захочете тримати елементи у масиві просто для рендеру.

Виходом може стати використання <Fragment/> .

Fragment — новий компонент React, він заміщає собою жахливі конструкції div.

import React, { Fragment } from "react"

const Headings = props => {
  return (
    <Fragment>
      <h1>{props.title}</h1>
      <p>{props.subtitle}</p>
    </Fragment>
  )
}

Тож після побудови сторінки все що буде відображатися у DOM:

<h1>Cool title</h1>
<p>Cooler subtitle</p>

Також можна використовувати <>, це еквівалент використанню <Fragment/>.

const Headings = props => {
  return (
    <>
      <h1>{props.title}</h1>
      <p>{props.subtitle}</p>
    </>
  )
}

Така конструкція працює, проте виглядає дещо дивно, тож можливо ви захочете використовувати саме <Fragment />.

Існує декілька застережень щодо використання синтаксису <></>.

  1. Якщо ви хочете, щоб <Fragment /> мав ключ, то ви не зможете використати <></>.
  2. <></> не працює якщо ви створювали проект з create-react-app.
  3. Необхідно використовувати Babel 7 або новіший, щоб трансляція виконувалася коректно, але вам не потрібно імпортувати Fragment в контекст застосунку.
Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.2K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація