当我有 `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 函数。我希望在显示模式后调用它

并且 componentWillUnmount 应该在 Modal 隐藏时调用。

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';

因为在render范围内没有show，你想获取state中存储的show的值，是吗？

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

ComponentDidMount function is called when I have `display: none`

reactjs

react-lifecycle

演示组件

模态组件