ReactDOM.createPorta

　　`ReactDOM.createPortal`是React的一个API，用于将组件渲染到DOM树中的不同位置，而不是组件当前所在的位置。

　　使用`ReactDOM.createPortal`可以将组件渲染到其他DOM元素的子树中，这对于在组件层次结构之外的位置渲染内容非常有用，例如模态框、弹出窗口、通知消息等。

　　下面是`ReactDOM.createPortal`的基本用法：　

import ReactDOM from 'react-dom';

const Modal = ({ children }) => {
  return ReactDOM.createPortal(
    children,
    document.getElementById('modal-root')
  );
};

// 在组件的父组件中使用Modal组件
const App = () => {
  return (
    <div>
      <h1>App Component</h1>
      {/* 其他组件 */}
      <Modal>
        <h2>Modal Content</h2>
      </Modal>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

　　在上述示例中，我们定义了一个名为Modal的组件，并使用ReactDOM.createPortal将h2 Modal Content /h2渲染到id为modal-root的DOM元素中。在父组件App中使用Modal将模态框内容渲染出来。

　　需要注意的是，ReactDOM.createPortal的第一个参数是要渲染的内容，可以是一个React元素或组件。第二个参数是目标DOM元素，它是一个在DOM中的有效元素，用于指定将内容渲染到哪个位置。

　　通过使用ReactDOM.createPortal，我们可以将组件的渲染范围扩展到DOM树的其他位置，从而实现更灵活的渲染和布局控制。