ReactJs:使用门户网站“模式"包装语义UI模式 [英] ReactJs: Wrap Semantic UI Modal using Portal "pattern"

问题描述

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

Here is my take at it http://jsfiddle.net/mike_123/2wvfjpy9/ I'm running into issue though, when obtaining a DOM reference and Rendering new markup into it there seem to be old reference still maintained.

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/

Any pointers how fix this test case http://jsfiddle.net/mike_123/2wvfjpy9/

推荐答案

使用上述方法，您将失去正确的垂直位置，甚至可能失去动画效果.

You will lose correct vertical positioning and probably animations with approaches mentioned above.

相反，您可以仅将模态的组件放置在应用程序的根组件中，并使用detachable: false调用.modal().使用此选项，语义将不会进行任何DOM操作，并且您不会丢失React DOM事件侦听器.

Instead, you can just place your modal's component inside your app's root component and call .modal() with detachable: false. With this option, semantic wouldn't make any DOM manipulations and you won't lose your React DOM event listeners.

使用Webpack/Babel的示例:

Example using 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>
    )
  }
 }

这篇关于ReactJs:使用门户网站“模式"包装语义UI模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！