V2EX 首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
React
V2EX  ›  React

React gotcha: 移动 dom 时需要保留一个 placeholder

  •  
  •   ChefIsAwesome · 44 天前 · 272 次点击
    这是一个创建于 44 天前的主题,其中的信息可能已经有所发展或是发生改变。

    弹出框类型的组件通常是在 body 内渲染的。用 react 实现这类组件时就需要在组件 mount 之后再把 dom 移到 body 里。

    如果我们直接把整个 component 的 dom 放到 body 里,而我们又在使用 react router 之类的会切换内容的功能。那么很有可能我们会在内容切换时得到错误:Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.。因为 react 认为我们的 component 没有移动过位置,它用我们的 component 作为参照,尝试往 component 之前添加 dom 。

    解决方法很简单:给我们的 component 多套一层。在我们想要移动 dom 时,只移动内容,保留外层,

    let Popup = React.createClass({
      componentDidMount() {
        let { container, content } = this.refs;
    
        // Move entire component into body. 
        // React might throw error when it tries to inject dom before our component.
        document.body.appendChild(container);
    
        // Move content into body, leave container there. Safe way to do it.
        document.body.appendChild(content);
      },
    
      render() {
        return (
          <div ref="container">
            <div ref="content"></div>
          </div>
        );
      }
    });
    
    目前尚无回复
    DigitalOcean
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   690 人在线   最高记录 2466   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.7.5 · 45ms · UTC 23:25 · PVG 07:25 · LAX 16:25 · JFK 19:25
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1