javascript - 如果 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()}

仅当弹出窗口可见时才会调用该函数。