我正在创建一个模式，显示有关特定用户的信息，并通过单击图片触发 . 模态应该能够从不同的组件启动 . 我的方法如下（我使用React with Redux）：

  • 使用“模态”属性创建商店，该属性设置为减速器“modalReducer”
modal: modalReducer

  • modal是具有以下属性的对象：showModal = false，user = undefined，image = undefined

  • 当单击包含图片的div时，将调度将showModal设置为true的操作（使用用户名和url图像链接作为参数） .

export var openModal = (user, image) => { return { type: 'OPEN_MODAL', user, image } }

  • 对于实际模态我使用foundation reveal modal并在其渲染方法中检查是否 modal.showModal == true 并使用jQuery打开它 .

现在，切换模态作为魅力，但我不能使用render方法内的modal.user和modal.image属性，因为它打印以下错误消息：

未捕获错误：findComponentRoot（...，.0.2.0.0.1）：无法找到元素 . 这可能意味着DOM意外地发生了变异（例如，通过浏览器），通常是由于在使用表时忘记了一个，在父表中使用嵌套标签，或者使用非SVG元素 . 尝试使用React ID``检查元素的子节点 .

我几乎可以肯定问题出在ProfileModal.jsx组件中 . 知道我做错了什么吗？

export class ProfileModal extends React.Component {
  componentDidMount () {
    var elem = new Foundation.Reveal($('#profile-modal'));
    $('#profile-modal').on('closed.zf.reveal',()=>{this.props.dispatch(actions.hideModal())});
  }
  render () {
    var {modal} = this.props;
    if (modal.showModal) {
      $('#profile-modal').foundation('open');
    }
      return(
        <div>
          <div id="profile-modal" className="reveal large">
            <div className="modal-container">
              <div className="modal-picture" style={{backgroundImage: `url(${modal.image})`}}></div>
              <p>{modal.user}</p>
...
javascript jquery reactjs redux react-redux