我有条件地基于display
属性渲染模式组件。
我需要在组件show
/ hide
上实现切换主体滚动功能。
请参阅以下实现
<button onClick={()=> this.setState({ show: true })}>Show modal</button>
<Modal show={show} containerStyle={containerStyle} position={position} handleClickOutside={()=> this.setState({ show: false })} >
<Content />
</Modal>
componentDidMount() {
disableBodyScroll(this.state.defaultMargin);
}
componentWillUnmount() {
enableBodyScroll(this.state.defaultMargin);
}
render() {
const { show } = this.props;
const display = show ? 'block' : 'none';
return (
<div onClick={ handleClickOutside } className={ styles[ 'modal'] } style={ { display } }>
{children}
</div>
);
}
但是问题是在显示Modal之前调用componentDidMount函数。我希望在显示Modal之后调用它
当Modal隐藏时,应该调用componentWillUnmount。
答案 0 :(得分:3)
您的显示样式不会阻止组件渲染,实际上,它必须渲染才能使显示样式发挥作用。
使用您的状态直接控制渲染。
<button onClick={()=> this.setState({ show: true })}>Show modal</button>
{this.state.show && <Modal show={show} containerStyle={containerStyle} position={position} handleClickOutside={()=> this.setState({ show: false })} >
<Content />
</Modal>}
答案 1 :(得分:0)
以下说法不正确:
const display = show ? 'block' : 'none';
应该是:
const display = this.state.show ? 'block' : 'none';
因为渲染范围中没有show
,您想获取状态中存储的show的值,对吗?