如何在反應組件中打開引導模式？

Question

有一個反應組件。 需要在頁面加載時打開引導模式。 嘗試使用 jQuery 和簡單的 javascript 但沒有成功。

反應組件：

import React, { Component } from 'react'
import $ from 'jquery'

class Login extends Component {
  componentDidMount() {
    // here I want to open modal
  }

  render() {
    return (
      <div className="modal fade WelcomeModal" id="WelcomeModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div className="modal-dialog modal-dialog-centered" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <div className="camera-box">
                <img alt="" src="/img/yellow-logo.svg"/>
                <h5 className="modal-title" id="exampleModalLabel">Welcome to the Cozy App!</h5>
              </div>                             
            </div>
            <div className="modal-body">
              <p className="text-center">On the following screens weʼll ask you to register the Cozys in your home & adjust your temperature settings. Youʼll need the following information:</p>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

Answer 1

看看這個codepen ，它展示了如何在不需要 jQuery 的情況下將 Bootstrap 類與 React 結合起來

toggleModal = () => this.setState({
              showLogin: !this.state.showLogin
          })

Answer 2

首先，不要在反應中使用 JQUERY。 您只需要設置顯示或隱藏模式的狀態。 就是這樣。

<div onClick={this.setState({showModal: true})}

Answer 3

為此，您不需要 Jquery，您需要做的就是使用 bootstrap css 類，這些類依次顯示或隱藏模態。

你可以在下面的鏈接中看到一個例子

關聯

Answer 4

在您的公共文件夾 index.htmlhttps://getbootstrap.com/docs/4.0/getting-started/introduction/ 中包含 Js cdn

然后像常規一樣調用引導程序模態， https://getbootstrap.com/docs/4.0/components/modal/