当我有“显示:无”时,调用ComponentDidMount函数

时间:2019-03-14 03:20:52

标签: reactjs react-lifecycle

我有条件地基于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。

2 个答案:

答案 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的值,对吗?