javascript - 为什么我的angerlySetInnerHTML渲染的内容被修改了？

Question

我有以下react代码:

const externalMarkup = `
<a data-refpt='DN_0OKF_177480_ID0EMPAC' />
<ol>
    <li value='1'>
        <p>
            <strong>Some Title</strong>
        </p>
        <ol>
            <li value='1'>
                <a data-refpt='DN_0OKF_177480_ID0EACAC' />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non ligula arcu. Nulla lobortis, purus et ultrices interdum, quam velit lobortis quam, blandit fringilla eros mauris at neque. Duis non nisl egestas mi fermentum laoreet. Vivamus ultricies odio sed leo vestibulum pulvinar. Quisque vitae libero sed velit hendrerit rhoncus non in nunc. Donec vulputate ante dolor, at aliquet odio tempus in. Sed orci urna, ullamcorper in nulla tempor, sollicitudin eleifend lectus. Aliquam posuere vel nisl porttitor elementum. Mauris quis dolor sagittis, tempus nunc quis, pharetra lectus. Integer semper laoreet tempor. Proin vel nunc in quam posuere vehicula. Cras sollicitudin dolor eu vehicula laoreet. Etiam lacus diam, tincidunt id congue id, mattis ac tortor. Vestibulum congue vestibulum egestas. Etiam in fermentum quam.</p>
            </li>
        </ol>
        <ol>
            <li value='2'>
                <a data-refpt='DN_0OKF_177480_ID0EODAC' />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non ligula arcu. Nulla lobortis, purus et ultrices interdum, quam velit lobortis quam, blandit fringilla eros mauris at neque. Duis non nisl egestas mi fermentum laoreet. Vivamus ultricies odio sed leo vestibulum pulvinar. Quisque vitae libero sed velit hendrerit rhoncus non in nunc. Donec vulputate ante dolor, at aliquet odio tempus in. Sed orci urna, ullamcorper in nulla tempor, sollicitudin eleifend lectus. Aliquam posuere vel nisl porttitor elementum. Mauris quis dolor sagittis, tempus nunc quis, pharetra lectus. Integer semper laoreet tempor. Proin vel nunc in quam posuere vehicula. Cras sollicitudin dolor eu vehicula laoreet. Etiam lacus diam, tincidunt id congue id, mattis ac tortor. Vestibulum congue vestibulum egestas. Etiam in fermentum quam.</p>
            </li>
        </ol>
    </li>
</ol>
`

ReactDOM.render(
  <div className='app'>
    <div className='raw-content'>
      <div dangerouslySetInnerHTML={{ __html: externalMarkup }}></div>
    </div>
  </div>,
  document.getElementById('root')
);

这是codepen为了它。

html 看起来渲染得很好，但是当我在 DevTools 中查看它时，我得到了一些与原始 html 不同的疯狂元素递归>:

为什么我会遇到这种情况以及如何纠正它？

Answer 1

a 标签根据 html 规范不能自动关闭，请参阅此处的另一个答案 xhtml self-closing anchor element <a /> allowed?