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

【问题标题】：How to get React setState to re-render for Foundation 6 Reveal (Modal)?如何让 React setState 为 Foundation 6 Reveal (Modal) 重新渲染？
【发布时间】：2023-03-24 00:57:01
【问题描述】：

我的问题已经在网络上的一些问题中被触及，但我认为它没有被全面提出。

我将 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 在构造函数中被设置为一个空数组。

所有代码在我的服务器上都是有效的（没有错误），但我是凭记忆写的，所以我不记得类/路径名之类的小细节

我尝试过的事情

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

【问题讨论】：

标签： javascript jquery reactjs zurb-foundation

【解决方案1】：

我不认为你的回答这么聪明。 AFAIK 目前的技术水平是使用 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 docs back it up 和我能够向它添加动态状态数据。感谢您的帮助！

【解决方案2】：

在把我的头撞在虚拟桌面上一天之后，我明白为什么让 Reveal 与 React 一起工作很困难，尤其是与其他 Foundation 元素相比。

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

我最终做的有点聪明，可以被看不起，但似乎非常必要。我在 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 思考。

【讨论】：