60 lines
2.6 KiB
Markdown
60 lines
2.6 KiB
Markdown
|
---
|
|||
|
title: Fragments
|
|||
|
localeTitle: Фрагменты
|
|||
|
---
|
|||
|
# Фрагменты
|
|||
|
|
|||
|
Фрагменты - это способ визуализации нескольких элементов без использования элемента-обертки. При попытке визуализации элементов без закрывающего тега в JSX вы увидите сообщение об ошибке. `Adjacent JSX elements must be wrapped in an enclosing tag` . Это связано с тем, что когда JSX транслирует, он создает элементы с соответствующими именами тегов и не знает, какое имя тега использовать, если найдено несколько элементов. Раньше частым решением для этого было использование обертки div для решения этой проблемы. Тем не менее, в версии 16 React появилось дополнение `Fragment` , что делает ненужным это.
|
|||
|
|
|||
|
`Fragment` выполняет обертку, не добавляя ненужные div в DOM. Вы можете использовать его непосредственно из импорта React или деконструировать его:
|
|||
|
|
|||
|
```jsx
|
|||
|
import React from 'react';
|
|||
|
|
|||
|
class MyComponent extends React.Component {
|
|||
|
render(){
|
|||
|
return (
|
|||
|
<React.Fragment>
|
|||
|
<div>I am an element!</div>
|
|||
|
<button>I am another element</button>
|
|||
|
</React.Fragment>
|
|||
|
);
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
export default MyComponent;
|
|||
|
```
|
|||
|
|
|||
|
```jsx
|
|||
|
// Deconstructed
|
|||
|
import React, { Component, Fragment } from 'react';
|
|||
|
|
|||
|
class MyComponent extends Component {
|
|||
|
render(){
|
|||
|
return (
|
|||
|
<Fragment>
|
|||
|
<div>I am an element!</div>
|
|||
|
<button>I am another element</button>
|
|||
|
</Fragment>
|
|||
|
);
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
export default MyComponent;
|
|||
|
```
|
|||
|
|
|||
|
React версия 16.2 упростила этот процесс далее, позволяя пустым тегам JSX интерпретироваться как фрагменты:
|
|||
|
|
|||
|
```jsx
|
|||
|
return (
|
|||
|
<>
|
|||
|
<div>I am an element!</div>
|
|||
|
<button>I am another element</button>
|
|||
|
</>
|
|||
|
);
|
|||
|
```
|
|||
|
|
|||
|
#### Дополнительная информация:
|
|||
|
|
|||
|
* [React.Fragment (официальная документация)](https://reactjs.org/docs/react-api.html#reactfragment)
|
|||
|
* [React v16.2.0: улучшенная поддержка фрагментов](https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html)
|