我创建了一个React组件，该组件接受任何组件并将其呈现为弹出窗口。父组件接收要渲染（弹出）的组件。这里渲染的组件是子组件，它使用react-sizeme来获取其大小并传递回父组件。父组件必须具有子组件的尺寸，因此请调整其高度和宽度。这是代码：
class Popup extends React.Component<IPopupProps,IComponent>{
constructor(props:IPopupProps){
super(props);
this.state={
childComponent:this.props.children,
style:{
height:0,
width:0
}
}
}
// This function runs two times, before and after rendering child component
// & so have an improper visualization as the size is changed twice here
public OnSize = (size:any) =>{
const width = size.width +20;
const height =size.height+20;
this.setState({
style:{height,
width }
})
}
public render(){
return(
<div className='popup'>
<div style={this.state.style} className='popup-content'>
<a className="close" onClick={this.props.onExit}>
×
</a>
<this.state.childComponent onSize={this.OnSize}/>
</div>
</div>
)
}
}初始宽度和高度设置为0。因此无法正确渲染。那么有什么方法可以隐藏子组件或避免在父组件获得尺寸之前渲染它？
编辑：在子组件被渲染之前，我们无法获得大小。所以有什么技巧可以做到这一点。仅一个组件需要正确弹出。
编辑2：这是PropsBuilder.tsx，它调用Popup.tsx并发送该组件以显示为子代
class PopupBuilder extends React.Component<IPopupBuilderProps, IPopup>{
constructor(props:IPopupBuilderProps){
super(props);
this.state = {
showPopup:false
}
}
public togglePopup = () =>{
this.setState({
showPopup:!this.state.showPopup
})
}
public render (){
return(
<React.Fragment>
<button onClick={this.togglePopup}>{this.props.trigger}</button>
<React.Fragment>
{this.state.showPopup?<Popup onExit={this.togglePopup} >{this.props.component}</Popup>:null}
</React.Fragment>
</React.Fragment>
)
}
}
export default PopupBuilder;实际上，这看起来像是更一般的DOM / JavaScript问题。
考虑这种情况：
const span = document.createElement('span');
span.innerText = 'hello';
span.getBoundingClientRect() // -> { width: 0, height: 0, top: 0, … }
这表明您直到元素在DOM中才知道元素的尺寸（在react中渲染）。
document.body.appendChild(span);
span.getBoundingClientRect(); // -> {width: 50, height: 16, …}
在这种情况下，我对您的建议是：
如果您无权访问子组件。您可以这样包装它：
// Popup.tsx
class Popup .... {
...
render() {
<Measurer>{this.props.children}</Measurer>
}
}
并实现其中提取尺寸的逻辑。Measurer是Popup的直接子代，您可以控制它们的通信。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句