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如果隐藏

1 个答案: