Question

在 Rax 的中，一切都是组件，用组件可以表示一切界面中发生的逻辑，不过，有些特例场景处理起来还是比较麻烦，比如，某个组件在渲染时，在某种条件下需要显示一个对话框（Dialog），作为通用组件的 Dialog，通常应该显示在屏幕的最中间，现在 Dialog 反而被包在其他组件中，这该怎么做呢？

Portal 可以有一个很形象的翻译——“传送门”，意思可以在两个不同位置的传送门之间形成对接。Rax Portal 之所以叫 Portal，因为做的就是和“传送门”一样的事情：Portal 提供了一种将子元素渲染到存在于 DOM 组件层次结构之外的 DOM 节点中。

方法

createPortal(child, container)

参数

• child 是任何可渲染的 Rax 子元素，例如一个元素，字符串或 Fragment

• container 是一个 DOM 元素。

示例

import createPortal from 'rax-create-portal';

const Portal = ({ children }) => {
  const el = useRef(document.createElement('div'));
  useEffect(() => {
    document.body.appendChild(el.current);
    return () => {
      el.current.parentElement.removeChild(el.current);
    };
  }, []);
  
// 无须再创建一个新的节点，它只是把 children 组件渲染到 `el.current` 中。
  return createPortal(children, el.current);
};

function App() {
  return <div>
    <Portal>
      <text>Hello Rax</text>
    </Portal>
  </div>
}