reactjs - 当我有 `display: none` 时调用 ComponentDidMount 函数

Question

我根据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>
  );
}

但问题是在显示模态之前调用了 componentDidMount 函数。我希望在显示模态后调用它

隐藏 Modal 时应调用 componentWillUnmount。

Answer 1

您的显示样式不会阻止组件呈现，实际上它必须呈现显示样式才能发挥作用。

使用您的状态直接控制渲染..

<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>}

Answer 2

以下陈述不正确：

const display = show ? 'block' : 'none';

它应该是：

const display = this.state.show ? 'block' : 'none';

因为没有show在渲染范围内，你想获取存储在状态中的显示值，不是吗？