您将失去正确的垂直位置，并且可能失去使用上述方法的动画。
相反，你可以只需将您的应用程序的根组件和调用内部的模态的组件
.modal()用
detachable:false。使用此选项，语义不会进行任何DOM操作，并且您不会丢失React DOM事件侦听器。
使用Webpack / Babel的示例：
import React, { Component } from 'react'import $ from 'jquery'if (typeof window !== 'undefined') { window.jQuery = $ require('semantic-ui/dist/semantic.js')}class App extends Component { state = { showModal: false } _toggleModal = (e) => { e.preventDefault() this.toggleModalState() } toggleModalState = () => { this.setState({ showModal: !this.state.showModal }) } render() { return ( <div> <a href="" onClick={this._toggleModal}></a> {this.state.showModal ? <Modal toggleModalState={this.toggleModalState}/> : ''} </div> ) }}class Modal extends Component { componentDidMount() { $(this.modal) .modal({ detachable: false }) .modal('show') } componentWillUnmount() { $(this.modal).modal('hide') } _close = (e) { e.preventDefault() alert("Clicked") this.props.toggleModalState() } render() { return ( <div ref={(n) => this.modal = n} className="ui modal"> <div > <a onClick={this._close} href="">Click Me</a> </div> </div> ) } }
