组件默认会按照既定层次嵌套渲染,也就是说写在哪就会在哪渲染。
那么如何让组件渲染到父组件之外?
可以使用 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 第一层