2.6 KiB
title | localeTitle |
---|---|
Fragments | Фрагменты |
Фрагменты
Фрагменты - это способ визуализации нескольких элементов без использования элемента-обертки. При попытке визуализации элементов без закрывающего тега в JSX вы увидите сообщение об ошибке. Adjacent JSX elements must be wrapped in an enclosing tag
. Это связано с тем, что когда JSX транслирует, он создает элементы с соответствующими именами тегов и не знает, какое имя тега использовать, если найдено несколько элементов. Раньше частым решением для этого было использование обертки div для решения этой проблемы. Тем не менее, в версии 16 React появилось дополнение Fragment
, что делает ненужным это.
Fragment
выполняет обертку, не добавляя ненужные div в DOM. Вы можете использовать его непосредственно из импорта React или деконструировать его:
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;
// 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 интерпретироваться как фрагменты:
return (
<>
<div>I am an element!</div>
<button>I am another element</button>
</>
);