为什么 React 组件中某些 dom 元素被删除了？

zjh1943 commented 1 month ago

你好，我在编辑器里写了这样一个 React Component，目的是为了给文本块的四个角加上四个黑色直角。

function Aside({ children }) {
  return (
    <div className="aside">
      <div class="corner-container">
        <div class="corner"> </div>
        <div class="corner" style={{ transform: 'rotate(90deg)' }}></div>
      </div>
      {children}
      <div class="corner-container">
        <div class="corner" style={{ transform: 'rotate(270deg)' }}></div>
        <div class="corner" style={{ transform: 'rotate(180deg)' }}></div>
      </div>
    </div>
  )
}

当我在 MDX Editor 中功预览的时候，四个直角是正常显示的。如下图：但，当我点击 “Copy” 生成微信公众号的 HTML 的时候，发现 div.corner-container 下的元素（div.conrner）不见了。如下图所示：

请问这是什么原因？我该如何保留四个黑色直角呢？谢谢！

maqi1520 commented 1 month ago

这个看起来是个问题，之前是由于 markdown 编译的时候会产生一些空标签，这些空标签在公众号后台会产生一些空行。因此将空标签删除了。你可以先使用 span 标签代替，后面会修复这个问题

zjh1943 commented 1 month ago

好的，谢谢！目前我用 svg 方式达到了同样的效果。

maqi1520 commented 1 month ago

https://github.com/maqi1520/mdx-editor/releases/tag/v0.9.8

maqi1520 / mdx-editor

为什么 React 组件中某些 dom 元素被删除了？ #69