为什么我危险地SetInnerHTML呈现的内容被修改了？

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?

查看其他答案