当前位置:  开发笔记 > 前端 > 正文

ReactDOM.render插入而不是替换?(有此原因,CSS相邻兄弟选择器)

如何解决《ReactDOM.render插入而不是替换?(有此原因,CSS相邻兄弟选择器)》经验,为你挑选了0个好方法。

目前,我正在使用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/

推荐阅读
和谐啄木鸟
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有