ReactJs:使用Portal"模式"包装语义UI模式

Question

我正在尝试使用此处描述的门户方法来包装Semantic UI Modal组件

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

使用上述方法,您将失去正确的垂直定位和动画.

相反,你可以只需将应用程序的根组件内的模态的组件并调用.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>
    )
  }
 }

Answer 2

当你打电话时this.$modal.modal('show'),它实际上会重构你的DOM,而React会对它不满意.另外,如果您尝试将控制权放入模态中,则控件将无法运行.

你应该做的是React.render一个已显示模式,即一个模式与标记,就好像$('.ui.modal').modal('show')被调用.

这是我尝试使用"React-Portal"帮助在体层渲染反应组件.如果您愿意,您仍然可以使用您的方法.

// modal.jsx
import React, { Component } from 'react';
import Portal from 'react-portal';

class InnerModal extends Component {
  constructor(props) {
    super(props);
    this.state = { modalHeight: 0 };
  }

  componentDidMount() {
    let modalHeight = window.$('#reactInnerModal').outerHeight();
    this.setState({modalHeight: modalHeight});
  }

  render() {
    return (
      <div id='reactInnerModal' className='ui standard test modal transition visible active' style={{'margin-top': - this.state.modalHeight / 2}}>
        <i className='close icon' onClick={this.props.closePortal}></i>
        {this.props.children}
      </div>
    );
  }
}

class Modal extends Component {
  render() {
    let triggerButton = <button className='ui button'>Open Modal</button>;
    return (
      <Portal className='ui dimmer modals visible active page transition' openByClickOn={triggerButton} closeOnEsc={true} closeOnOutsideClick={true}>
        <InnerModal>
          {this.props.children}
        </InnerModal>
      </Portal>
    );
  }
}

export default Modal;

请注意,我的模态已经在标记中呈现.

然后您可以使用以下模式:

// index.jsx
import React, { Component } from 'react';
import Modal from './modal';

class ModalDemo extends Component {
  render() {
    return (
      <Modal>
        <div className='header'>
          Profile Picture
        </div>
        <div className='image content'>
          <div className='ui medium image'>
            <img src='http://semantic-ui.com/images/avatar2/large/rachel.png' />
          </div>
          <div className='description'>
            <div className="ui header">We've auto-chosen a profile image for you.</div>
            <p>We've grabbed the following image from the <a href='https://www.gravatar.com' target='_blank'>gravatar</a> image associated with your registered e-mail address.</p>
            <p>Is it okay to use this photo?</p>
          </div>
        </div>
        <div className='actions'>
          <div className='ui black deny button'>
            Nope
          </div>
          <div className='ui positive right labeled icon button'>
            Yep, that's me
            <i className='checkmark icon'></i>
          </div>
        </div>
      </Modal>
    );
  }
}

React.render(<ModalDemo />, document.getElementById('content'));

有了这个,你不必破解你使用jQuery进行DOM操作的方式,并且模态中的控件(按钮,链接等,以调用函数)仍然有效.

希望这有帮助!