目前,我正在使用React:
ReactDOM.render(, 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/