如果父元素中有设置transform属性,perspective属性,will-change属性,其下的子元素的position:fixed会失效,是因为这几个元素可以创建新的堆叠上下文。
react解决方法:
//创建一个挂载全局的方法
import React,{Component} from 'react';
import ReactDom from 'react-dom';
export default class RenderInBody extends Component{
constructor(p){
super();
}
componentDidMount(){//新建一个div标签并塞进body
this.popup = document.createElement("div");
document.body.appendChild(this.popup);
this._renderLayer();
}
componentDidUpdate() {
this._renderLayer();
}
componentWillUnmount(){//在组件卸载的时候,保证弹层也被卸载掉
ReactDom.unmountComponentAtNode(this.popup);
document.body.removeChild(this.popup);
}
_renderLayer(){//将弹层渲染到body下的div标签
ReactDom.render(this.props.children, this.popup);
}
render(){
return null;
}
}
用的时候用这个组件包裹的内容就会直接挂在到body上了,类比也可以挂载到指定节点上。
<RenderInBody>
<CashHeader
title="外卖系统"
type="delivery"
onAddItem={this.addDeliverySys}
onSkipStep={this.skipStep} />
</RenderInBody>
缺点:如果想实时传参,这个挂载的组件可能获取不到,只能获取到初始赋值,因为已经不存在父子关系了,可以用订阅,也可以都在在model里取值
网友评论