Question

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

使用＆＃34;模态＆＃34;创建商店已设置为减速器的属性＆＃34; modalReducer＆＃34;
```
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>
...

使用react-redux和foundation创建一个全局模态揭示

0 个答案: