reactjs - ReactDOM.render 改为 insertBefore 而不是替换？ (有原因的，CSS相邻同级选择器)

Question

目前使用 React 我正在这样做:

 ReactDOM.render(<HelloMessage name="John" />, mountNode);

这会替换mountNode的全部内容，是否可以将其设为insertBefore而不是replace？我想将其作为第一个子元素插入。

编辑 - 为什么我需要这个简化的案例。我的组件是一个菜单，当它处于打开状态时，它会打开并显示像抽屉一样的项目。因此，我必须在菜单组件之后给元素一个框阴影，以表明它位于显示的元素之上。我用这个 css 来做到这一点:

.myComponent[data-state=open] + div {
  background-color: red;
}

但是 myComponent 没有相邻的同级组件，因为我替换了目标元素的内容，因此失败。所以我的解决方法是，在每次渲染时，在父节点上设置属性:

    if (this.refs.myc) {
        this.state.profiles.length > 0 ? this.refs.myc.parentNode.setAttribute('data-state', 'open') : this.refs.myc.parentNode.removeAttribute('data-state'); // my ugly work around, put the data-state attribute on the parentNode of mountNode
    }

但是这效率不高，因为它不是在虚拟 dom 上设置，而是每次都在 dom 上设置。所以我想将我的组件作为正文中的第一个子组件插入，这样我的样式表就可以工作。

这是解决问题的工作 fiddle - https://jsfiddle.net/Noitidart/69z2wepo/26319/

Answer 1

你解决这个问题了吗？您绝对应该能够将其安装在不同的地方

const newChildNode = document.createElement('DIV')
newChildNode.id = 'new-child-node'
document.body.insertBefore(newChildNode, document.getElementById('root'))

ReactDOM.render(<App />, newChildNode)