Foundation Reveal Modal 未与 React 15.3.2 一起关闭

Question

我的模式正常工作，即 第一次 完美打开和关闭，但是，它不会再次打开。我在控制台中看到以下错误 -

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
Uncaught (in promise) Error: Attempted to update component 'ErrorModal' that has already been unmounted (or failed to mount).

我每次关闭时都需要销毁我的模态吗？

ErrorModal.jsx

var React = require('react');

var ErrorModal = React.createClass({
  componentDidMount: function () {
    var modal = new Foundation.Reveal($('#error-modal'));
    modal.open();
  },
  render: function() {

    return (
      <div className='reveal tiny text-center' id='error-modal' data-reveal="">
        <h4>Some title</h4>
        <p>Our Error msg</p>
        <p>
          <button className ='button hollow' data-close="">
            Okay
          </button>
        </p>
      </div>
    );

  }
});

module.exports = ErrorModal;

Answer 1

我现在在 ZF==6.2.1 中有类似的情况

在运行 modal.open(); 基础更改 DOM 之后基础显示模态并将模态移动到正文末尾 - 添加新的叠加层。组件离开反应安装节点 - 这是问题

Answer 2

您可以使用 react-dom 尝试此解决方案，让 react 负责更新 dom 而不是基础

/* global $, Foundation */
import React from 'react'
import ReactDOM from 'react-dom'
import ReactDOMServer from 'react-dom/server'

class ErrorModal extends React.Component {
  componentDidMount () {
    const modalContent = (
      <div id='error-modal'
        className='reveal tiny text-center'
        data-reveal=''>
        <h4>Some title</h4>
        <p>our error message</p>
        <p>
          <button className='button hollow' data-close=''>
            Okay
          </button>
        </p>
      </div>
    )
    const modalElement = $(ReactDOMServer.renderToString(modalContent))
    $(ReactDOM.findDOMNode(this)).html(modalElement)

    const modal = new Foundation.Reveal($('#error-modal'))
    modal.open()
  }
  render () {
    return (
      <div />
    )
  }
}

export default ErrorModal

Foundation Reveal Modal 未与 React 15.3.2 一起关闭

Foundation Reveal Modal not closing with React 15.3.2

zurb-foundation

reactjs

ErrorModal.jsx