ReactDOM.render插入而不是替换？（有此原因，CSS相邻兄弟选择器）

Question

目前，我正在使用React：

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

这将替换的全部内容mountNode，是否可以insertBefore代替替换？我想将其作为第一个孩子插入。

编辑-为什么我需要这个简化的案例。我的组件是一个菜单，当它处于打开状态时，它会打开并显示抽屉等项目。因此，我必须在菜单组件后的元素上添加一个框阴影，以表明该元素位于显示的元素上方。我用这个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上设置。所以我想将我的组件作为第一个孩子插入体内，这样我的样式表就可以工作了。

这是工作的小提琴-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)