Фрагменты
Обычный шаблон в React - компонент возвращает несколько элементов. Фрагменты позволяют группировать список детей без добавления дополнительных узлов в DOM.
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
мотивация
Распространенный шаблон для компонента - вернуть список дочерних элементов. Возьмите этот пример React snippet:
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
<Columns /> потребуется вернуть несколько элементов <td>, чтобы отображаемый HTML был действительным. Если родительский div был использован внутри render () в <Columns />, то полученный HTML-код будет недействительным.
class Columns extends React.Component {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
}
приводит к выводу <Table />:
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
Фрагменты решают эту проблему.
использование
class Columns extends React.Component {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
}
что приводит к правильному выводу <Table />:
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
Краткий синтаксис
Существует новый, более короткий синтаксис, который вы можете использовать для объявления фрагментов. Это выглядит как пустые теги:
class Columns extends React.Component {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
}
Вы можете использовать <> </> так же, как и любой другой элемент, за исключением того, что он не поддерживает ключи или атрибуты.
Ключевые фрагменты
Фрагменты, объявленные с явным
function Glossary(props) {
return (
<dl>
{props.items.map(item => (
// Without the `key`, React will fire a key warning
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}
ключ является единственным атрибутом, который может быть передан фрагменту. Facebook предполагает, что в будущем будут созданы фрагменты, чтобы принять другие атрибуты.
Новый контент: Composer: менеджер зависимостей для PHP , R программирования