如何让 React setState 为 Foundation 6 Reveal (Modal) 重新渲染？

Question

我的问题已在网络上的几个问题中被触及，但我不认为它已被全面询问。

我正在使用 Foundation 6 和 React。使用

一切正常

import $ from 'jquery';
window.jQuery = $;
let foundation = require('path/to/foundation.js');

然后在componentDidUpdate()，我调用$(document).foundation()。此外，CSS 在某处被调用。

我的问题是，一旦打开模式，我就无法使用 setState() 向其中填充数据。我想我明白 DOM 在模态打开时会发生变化，从而导致问题，但我想知道是否有人成功使用 Reveal 插件？我的代码是这样的：

getData() {
    Facebook.get('/me/taggable_friends', function(error, response) {
        $('#modal').foundation('open');
        
        //setTimeout is just for testing sanity
        let _this = this;
        setTimeout(function() {
            _this.setState({ friends: response.data });
        }, 3000);
    })
}

同样，一切正常。我正在从 Facebook 取回数据，状态正在更新，模式正在打开，我只是无法填充模式，我将其作为我的标记：

<div id="modal" className="modal-classes-from-foundation" data-reveal>
    {
        this.state.friends.length > 0 &&
        this.state.friends.map((friend, i) => {
            return(
                <div>{ friend.name }</div>
            )
        })
    }
</div>

还要注意，this.state.friends 在构造函数中被设置为一个空数组。

所有代码在我的服务器上都是有效的（没有错误），但我是凭记忆写的，所以我不记得像 class/path 名称[ 这样的小细节=18=]

我尝试过的东西

使用componentWillReceiveProps强制更新
调用模态打开前设置状态

Answer 1

在虚拟办公桌上苦苦思索了一天之后，我明白了为什么 Reveal 很难与 React 一起工作，尤其是与其他 Foundation 元素相比。

Reveal 是一个位于 <body></body> 内部但不在 <div id="app"></div> 内部的叠加层，或者您将 React 应用程序渲染到的根 div 命名为任何名称。由于覆盖在 "app" 之外，React 无法控制它并且向它发送 states/props 不会做任何事情。

我最后做的事情有点聪明，会被人看不起，但又显得很有必要。我从 2015 年的 BlackMutt 中获得灵感，他基本上创建了一个函数来使用 jQuery 来附加模态代码并对其进行初始化。不幸的是，这意味着您使用模态框执行的所有其他操作也需要使用 jQuery，但好消息是它与应用程序的其余部分是分开的。这是它的外观示例：

createListModal(items) {
    let content = items.map((item, i) => {
        return $('<div class="list-item"><div class="item-name">'+ item.name +'</div></div>');
    });
    let close = $('<button class="close-button" data-close aria-label="Close modal" type="button"><span aria-hidden="true">&times;</span></button>');
    let modal = $('<div class="reveal" id="list-popup" data-reveal>').append(content).append(pagination).append(close);
    $(modal).foundation();

    $('#list-popup').foundation('open');
}

因此，当我从 Facebook 获取数据时，我所做的就是调用该方法。这非常简单，但如果您已经使用 React 一段时间，您必须再次将大脑切换回 jQuery 中思考。

Answer 2

我不认为你的回答很聪明。据我所知，目前最先进的技术是使用 setNode 方法设置 nodeReference，然后

ref={this.setNode}

在你的元素中，这样你就可以调用你用 jQuery 调用的任何东西，通过参数将它传递给节点，这样你就可以使用它，并使用 React 生命周期挂钩来同步你的反应世界你的 jQuery 游乐场

componentWillMount() {
  window.addEventListener('resize', this.handleWindowResize, false);
}

componentDidMount() {
  //initialize your jQuery dom manipulation
}

shouldComponentUpdate(nextProps) {
  if (!this.props.store.equals(nextProps)) {
    //to update stuff
  }
  return false; //> dont update
}

componentWillUnmount() {
  //
}

setNode(ref) {
  this.nodeReference = ref;
}

如何让 React setState 为 Foundation 6 Reveal (Modal) 重新渲染？

How to get React setState to re-render for Foundation 6 Reveal (Modal)?

javascript

jquery

zurb-foundation

reactjs

我尝试过的东西