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 />
.
Існує декілька застережень щодо використання синтаксису <></>
.
- Якщо ви хочете, щоб
<Fragment />
мав ключ, то ви не зможете використати<></>
. -
<></>
не працює якщо ви створювали проект з create-react-app. - Необхідно використовувати Babel 7 або новіший, щоб трансляція виконувалася коректно, але вам не потрібно імпортувати Fragment в контекст застосунку.
Ще немає коментарів