如果 SweetAlert 隐藏，则正在渲染

Question

有一些组件正在使用来自 "react-bootstrap-sweetalert" 的 SweetAlert。

如果 "show" 属性为 false 则 SweetAlert 不应呈现的问题但在我的例子中，它无论如何都在渲染，无论它是否隐藏，SweetAlert 中的函数每次都会调用。

这里有一些例子：

someFucntion = () => {
    console.log('TEST');
};
render() {
    const { showAlert } = this.state;

    return (
      <span>
        <SweetAlert
          show={showAlert}
          confirmBtnText="OK"
          title=""
          onConfirm={this.confirm}
          onCancel={this.cancel}
        >
          {this.someFunction()}
        </SweetAlert>
      </span>
    );
  }
}

Answer 1

它被渲染是因为你告诉它渲染。如果你不想渲染它，那么你需要用三元包围它。像这样：

{showAlert && 
<SweetAlert
      show={showAlert}
      confirmBtnText="OK"
      title=""
      onConfirm={this.confirm}
      onCancel={this.cancel}
    >
      {this.someFunction()}
    </SweetAlert>
}

请注意，您可能不会获得预期的动画，因为弹出窗口不会呈现给 DOM，所以他只会出现。如果您不想调用该函数，只需用三元包围它即可。

{showAlert && this.someFunction()}

这将仅在弹出窗口可见时调用该函数。

如果 SweetAlert 隐藏，则正在渲染

SweetAlert is rendering if its hidden

javascript

reactjs

sweetalert