modal-dialog - ReactJs:使用 Portal 包装语义 UI 模态 "pattern"

Question

我正在尝试使用描述的门户方法包装语义 UI 模态组件 here

这是我的看法 http://jsfiddle.net/mike_123/2wvfjpy9/ 不过，我遇到了问题，当获取 DOM 引用并将新标记渲染到其中时，似乎仍保留旧引用。

render: function() {
    return <div className="ui modal"/>; <-- the idea at first was to only return <div/>
},

...

        React.render(<div > <----------- originally this element had className="ui modal", but this.node doesn't seem to overtake the original node reference
                    <i className="close icon"></i>
                    <div className="header">test</div>
                    <div className="content">
                        {props.children}
                    </div>
                </div>, <----------- 
                this.node);

如何修复此测试用例的任何指示 http://jsfiddle.net/mike_123/2wvfjpy9/

Answer 1

使用上述方法，您将失去正确的垂直定位，甚至可能失去动画。

相反，您可以将模态组件放置在应用的根组件中，并使用 detachable: false 调用 .modal()。使用此选项，语义不会进行任何 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 class="content">
          <a onClick={this._close} href="">Click Me</a>
        </div>
      </div>
    )
  }
 }