react-render-portal

install

npm install react-render-portal --save

usage

react v16.0.0

import React from 'react';
import {RenderPortalV2} from 'react-render-portal';

  const example = () => (
    <RenderPortalV2>
       <p>I will render in body</p>
    </RenderPortalV2>
  )

RenderPortalV2组件会将 其内部子组件 <p>I will render in body</p>传送至 body 节点下 和 root并列 并且 RenderPortalV2 内部子组件 会触发的事件会一直冒泡至 RenderPortalV2 (沿React树传递)

代码示例

jsfiddle传送门 (V16.0.0冒泡事件的传递请到这里查看)

update: 在RenderPortalV2基础上更新至RenderPortalV3,使RenderPortal支持创建自定义的container包裹目标组件

import React from 'react';
import {RenderPortalV3} from 'react-render-portal';

 getContainer() {
    const popup= document.createElement('div');
    document.body.appendChild(popup);
    return popup;
 }
 
 const example = () => (
    <RenderPortalV3 container={this.getContainer} >
       <p>I will render in body</p>
    </RenderPortalV2>
  )

react 旧版本

import React from 'react';
import {RenderPortalV1} from 'react-render-portal';

  const example = () => (
    <RenderPortalV1>
       <p>I will render in body</p>
    </RenderPortalV1>
  )

RenderPortalV2组件会将 其内部子组件 <p>I will render in body</p>传送至 body 节点下 和 root并列 无事件传递

代码示例

jsfiddle传送门