React Portals

组件默认会按照既定层次嵌套渲染,也就是说写在哪就会在哪渲染。

那么如何让组件渲染到父组件之外?

可以使用 Portals 渲染到 body 上

import React from 'react'
import ReacDom from 'react-dom'

class ItemList extends React.Component {

    // ...

  render() {
        let style = {
            position: fixed,
            ...
        }
        /**
            *   使用 portals 渲染到body上
            * 像 fixed 元素最好放在body上,能有更好的浏览器兼容性
            * ReactDom.createPortal 的第二个参数是决定要放在哪个节点下的
            */
    return ReactDom.createPortal(
            <div className={style}></div>,
            document.body
        )
  }
}

export default ItemList;

Portals 的使用场景:

1.overflow: hidden,(BFC),在这种情况下想要渲染到外面就可以使用 Portals 实现。
2.父组件 z-index 值太小,层级不够可以使用 Portals 实现换个位置。
3.fixed 需要放在 body 第一层

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容