如何在新窗口中打开React Modal

Question

我的新模态显示在父模态下。如何使其在新窗口/模式中打开？这是一些代码。

class ForgotPassword extends Component {
  state = {
    showModal: false,
    email: "",
    errors: {
      cognito: null,
      blankfield: false
    }
  };

  openModal = () => {
    this.setState({ showModal: true });
  };

  clearErrorState = () => {
    this.setState({
      errors: {
        cognito: null,
        blankfield: false
      }
    });
  };

 <button
    className="ui medium button is-success"
    style={{ position: "relative", left: "350px" }}
    onClick={this.openModal}>
     {t("collaborateur.attribut.bouton.soumettre")}
 </button>
 <ForgotPasswordVerification showModal={this.state.showModal}/>

在需要显示的模式中，我刚刚添加了以下内容：

class ForgotPasswordVerification extends Component {
render() {
    if (!this.props.showModal) {
      return null;
    }
   }

Answer 1

有不同的方法。一种方法是

class ForgotPassword extends Component {
  state = {
    showForgotPasswordVerification: false,
    email: "",
    errors: {
      cognito: null,
      blankfield: false
    }
  };

  openModal = () => {
    this.setState({ showModal: true });
  };

  clearErrorState = () => {
    this.setState({
      errors: {
        cognito: null,
        blankfield: false
      }
    });
  };

然后在渲染中可以通过

if (this.state.showForgotPasswordVerification){
return <ForgotPasswordVerification/>
}

最好的方法是使用路线。在这里您可以查看不同的示例https://reacttraining.com/react-router/web/guides/quick-start