createPortal 用法 - JavaScript

介绍

createPortal 是 React 中的一个特殊 API，用于将子元素渲染到父元素的 DOM 层次结构之外。createPortal 通常用于创建模态框、悬浮菜单、通知栏等 UI 组件，以避免对父组件的 DOM 嵌套产生不必要的影响。

语法

ReactDOM.createPortal(child, container)

• child: React 元素，需要渲染在非父组件 DOM 下的子元素。
• container: DomNode，子元素将被挂载到此节点下。
• 返回值: 返回 child 元素的引用。

例子

import ReactDOM from 'react-dom';

function Modal(props) {
  return ReactDOM.createPortal(
    props.children,
    document.getElementById('modal-root')
  );
}

function App() {
  return (
    <div>
      <span>Some content goes here!</span>
      <Modal>
        <div>Some modal content goes here!</div>
      </Modal>
    </div>
  );
}

在上面的例子中，Modal 组件使用 createPortal 将其子元素渲染到页面中具有 id 为 modal-root 的 DOM 元素之外。接着在 App 组件中使用 Modal 组件。

注意事项

1. container 参数必须是一个有效的 DOM 元素。
2. 渲染在 createPortal 中的组件可以访问父组件的 context。
3. 若在子组件的 render() 方法中使用 createPortal，则确保在每次渲染时都调用一次 createPortal。因为在根据 diff 算法进行更新时，React 并不会重新创建 Portal。
4. createPortal 适合用于需要将子元素渲染到页面中的不同的位置而不是紧贴父组件的场景。
5. 使用 createPortal 不会影响 React 的事件系统。事件仍然像在 DOM 中嵌套的那样发起和处理。
6. React 仅支持将子元素渲染到单一容器中。因此，必须将需要渲染的内容封装到单一节点中。

结论

createPortal 可以将渲染的内容从父组件的 DOM 移动到其他容器，从而使组件的嵌套关系更少。与使用其他非标准方法(如 document.createElement)相比，使用 createPortal 更加安全，因为 React 可以保证在 element 卸载时正确地处理所有的事件和状态更改。

返回结果:

# `createPortal` 用法 - JavaScript

## 介绍

`createPortal` 是 React 中的一个特殊 API，用于将子元素渲染到父元素的 DOM 层次结构之外。`createPortal` 通常用于创建模态框、悬浮菜单、通知栏等 UI 组件，以避免对父组件的 DOM 嵌套产生不必要的影响。

## 语法

```javascript
ReactDOM.createPortal(child, container)

• child: React 元素，需要渲染在非父组件 DOM 下的子元素。
• container: DomNode，子元素将被挂载到此节点下。
• 返回值: 返回 child 元素的引用。

例子

import ReactDOM from 'react-dom';

function Modal(props) {
  return ReactDOM.createPortal(
    props.children,
    document.getElementById('modal-root')
  );
}

function App() {
  return (
    <div>
      <span>Some content goes here!</span>
      <Modal>
        <div>Some modal content goes here!</div>
      </Modal>
    </div>
  );
}

在上面的例子中，Modal 组件使用 createPortal 将其子元素渲染到页面中具有 id 为 modal-root 的 DOM 元素之外。接着在 App 组件中使用 Modal 组件。

注意事项

1. container 参数必须是一个有效的 DOM 元素。
2. 渲染在 createPortal 中的组件可以访问父组件的 context。
3. 若在子组件的 render() 方法中使用 createPortal，则确保在每次渲染时都调用一次 createPortal。因为在根据 diff 算法进行更新时，React 并不会重新创建 Portal。
4. createPortal 适合用于需要将子元素渲染到页面中的不同的位置而不是紧贴父组件的场景。
5. 使用 createPortal 不会影响 React 的事件系统。事件仍然像在 DOM 中嵌套的那样发起和处理。
6. React 仅支持将子元素渲染到单一容器中。因此，必须将需要渲染的内容封装到单一节点中。

结论

createPortal 可以将渲染的内容从父组件的 DOM 移动到其他容器，从而使组件的嵌套关系更少。与使用其他非标准方法(如 document.createElement)相比，使用 createPortal 更加安全，因为 React 可以保证在 element 卸载时正确地处理所有的事件和状态更改。