2.6 KiB

Raw Blame History

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> 
  </> 
 );

2.6 KiB Raw Blame History Unescape Escape

Фрагменты

Дополнительная информация:

2.6 KiB

Raw Blame History