如何在ReactJs (JSX)中使用<div>打破HTML语义？

Question

ReactJs文档中说：

有时，为了使我们的React代码正常工作，特别是在处理列表（<ol>, <ul>和<dl>）和HTML <table>时，我们会添加<div>元素来破坏HTML语义。在这些情况下，我们应该使用React Fragments将多个元素组合在一起。

参考：https://reactjs.org/docs/accessibility.html 我真的很想了解如何通过使用<div>或上述其他元素来破坏HTML语义，以及React Fragments如何改进这种情况。

此外，我想了解破坏这种语义可能引起的问题。

提前致谢。

- A. Sinha

---

在HTML中，某些元素不应该是其他元素的子元素。例如，锚标签不应嵌套。或者ul不能有一个div作为子元素。<React.Fragment>元素告诉React当前组件的根级别有多个元素。然而，React需要有一个根级别元素。大多数开发人员会在呈现列表项的组件周围添加一个div来解决必须有父级元素的问题。但这会使DOM混乱，并且有时会产生无效的子HTML元素。 - John Ruddell

有用的链接... https://dev59.com/vGMl5IYBdhLWcg3wHj5O https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul 查看“允许的内容” - John Ruddell

Answer 1

假设您有一个<ul id="root">元素，您想在其中插入一对<li>标签。React元素只能有单个根节点，因此首先要做的是将所有<li>标签包装在<div>中，例如以下内容：

  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语义，将div直接放置在ul元素中不符合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>

- Nedko Dimitrov

---

优秀的回答，一个注释："现在我们成功地破坏了HTML语义" - 也许你可以强调这里直接在ul元素内部放置div并不是有效的HTML。 - Patrick Hund

@Patrick Hund：我有这样的印象，使用“语义”这个词来开始文档可能是错误的...正如你所指出的，这完全是一个有效标记的问题，“破坏语义”这个短语本身并没有太多意义。 - BoltClock