我们如何通过在 ReactJs (Jsx) 中使用 <div> 来打破 HTML 语义

Question

ReactJs 文档说：

有时，当我们将<div> 元素添加到我们的 JSX 让我们的 React 代码工作，尤其是在处理列表时 (<ol>, <ul> and <dl>) 和 HTML <table>。在这些情况下，我们应该 而是使用 React Fragments 将多个元素组合在一起。

参考：https://reactjs.org/docs/accessibility.html

我真的很想了解我们如何通过使用<div> 或上述其他元素来打破 HTML 语义，以及 React Fragments 如何对此进行改进。

另外，我想了解破坏这种语义可能会出现什么问题。

提前致谢。

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 语义，在 ul 元素中直接包含 div 是无效的 HTML。避免这种情况的一种方法是使用 React Fragments：

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

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

片段不会插入额外的 HTML 标签，这不会破坏语义。这是生成的 HTML

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