20. Portals和Fragment

3. Portals和Fragment

• 3.1. Portals的使用

  • 1. 某些情况下，我们希望先渲染的内容独立于父组件，甚至是独立于当前挂载到的DOM元素中(默认都是挂载到id为root的DOM元素上)。
  • 2. Portal提供了一种将子节点渲染到存在于父组件以外的DOM节点的优秀的方案：
    • 2.1. 第一个参数(child)是任何可渲染的React子元素，例如一个元素，字符串或Fragment。
    • 2.2. 第二个参数(container)是一个DOM元素。
    • 2.3. 示例代码如下：

        ReactDOM.createPortal(children, container) 
      

  • 3. 通常来讲，当你从组件的render方法返回一个元素时，该元素将被挂载到DOM节点中离其最近的父节点；
  • 4. 然而，有时候将子元素插入到DOM节点中的不同位置也是有好处的
       

• 3.2. Portals应用(Modal组件案例)

  • 1. 比如说，我们准备开发一个Modal组件，它可以将它的子组件渲染那到屏幕的中间位置
  • 2. 步骤一：修改index.html添加新的节点
  • 3. 步骤二：编写这个节点的样式
  • 4. 步骤三：编写Modal组件代码

      <div id="root"></div><div id="modal"></div>
    

      #modal {position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%)}
    

      import React, { PureComponent } from 'react'import { createPortal } from 'react-dom'export class Modal extends PureComponent {render() {return createPortal(this.props.children, document.querySelector('#modal'))}}export default Modal
    

• 3.3. Fragment

  • 1. 在之前的开发中，我们总是在一个组件中返回内容时包裹一个div元素：
       
  • 2. 我们又希望可以不渲染这样一个div应该如何操作呢？
    • 2.1. 使用Fragment
    • 2.2. Fragment允许你将子列表分组，而无需向DOM添加额外的节点
  • 3. React还提供了Fragment的短语发：
    • 他看起来像一个空标签：<> </>
    • 但是，如果我们需要再Fragment中添加key或者其他属性，那么就不能使用短语语法