ReactJs：使用门户网站“模式”包装语义UI模式

小编典典

ReactJs：使用门户网站“模式”包装语义UI模式

reactjs

我正在尝试使用此处介绍的门户网站方法包装语义UI模态组件

这是我的看法 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/

阅读 191

2020-07-22

共1个答案

小编典典

您将失去正确的垂直位置，并且可能失去使用上述方法的动画。

相反，你可以只需将您的应用程序的根组件和调用内部的模态的组件.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 class="content">

          <a onClick={this._close} href="">Click Me</a>

        </div>

      </div>

    )

  }

 }

2020-07-22