Как мы нарушаем семантику HTML, используя <div>в ReactJs (Jsx)

Question

Документы ReactJs говорят:

Иногда мы нарушаем семантику HTML, когда добавляем <div> элементы в наш JSX, чтобы заставить работать наш код React, особенно при работе со списками (<ol>, <ul> and <dl>) иHTML <table>.В этих случаях нам лучше использовать React Fragments для группировки нескольких элементов.

Ref: https://reactjs.org/docs/accessibility.html

Мне бы очень хотелось понять, как мы разбиваем семантику HTML с помощьюиспользование <div> или других элементов, упомянутых выше, и использование фрагментов реагирования является улучшением по сравнению с этим.

Кроме того, я хотел бы понять, какие проблемы могут возникнуть при нарушении такой семантики.

Заранее спасибо.

Answer 1

Представьте, что у вас есть элемента, и вы хотите вставить в него пару тегов.Элемент React может иметь только один корневой узел, поэтому первое, что приходит на ум, - это обернуть все теги в , например, следующее:

  const element = () => {
     return (
       <div>
         <li>Some list item</li>
         <li>Some other list item</li>
       </div>
     );
  };

  ReactDOM.render(element, document.getElementById('root'));

, что приведет к следующему HTML:

<ul id="root">
    <div>
        <li>Some list item</li>
        <li>Some other list item</li>
    <div>
</ul>

Теперь мы успешно нарушили семантику HTML, недопустимо, чтобы HTML имел div непосредственно внутри элемента ul.Одним из способов избежать этого является использование React Fragments :

  const element = () => {
     return (
       <Fragment>
         <li>Some list item</li>
         <li>Some other list item</li>
       </Fragment>
     );
  };

  ReactDOM.render(element, document.getElementById('root'));

Fragment не вставляет дополнительный HTML-тег, который не нарушит семантику.Вот результирующий HTML

<ul id="root">
    <li>Some list item</li>
    <li>Some other list item</li>
</ul>