React Component: Foundation Modal (Reveal) 打不开

Question

所以我刚刚开始学习 React 和 Redux，如果这是一个非常菜鸟的问题，我深表歉意。但是我清空了我的 Google 引用，找不到任何对我有帮助的东西。

我的问题是：我在一个使用 React、Redux 和 Foundation 6 的网站上工作。我的一个 React 组件有一个 link，当点击它时，应该打开一个带有特定警告的模式link。所以我用模态标记创建了一个组件：

ComponentModal.js:

import React, { PropTypes } from 'react';
const Modal = () => (
  <div className="reveal" id="exampleModal1" data-reveal>
    <h1>Awesome. I Have It.</h1>
  </div>
);

export default Modal;

具有 link 的组件呈现一些内容，但基本上具有

<a data-open="exampleModal1">Click me for a modal</a>

渲染中的标签。

虽然检查页面确认模式标记存在，但当我单击 link 时没有任何反应。
如果我将弹出窗口从组件移到 DOM，link 有效。
一些试验和错误告诉我，如果我在呈现 ComponentModal 时在控制台中手动运行 $(document).foundation();，弹出窗口将按预期工作。

所以我的问题是两个问题： 1. 在 Redux 中，当我的 ComponentModal 完成渲染时，如何运行 $(document).foundation();？也许我错了，但我没有可用的 componentDidMount() 方法，在哪里进行调用可能有意义？ 2. 这是完全错误的做法吗？

希望这个问题不要太混乱也不要太愚蠢:)

Answer 1

仅供参考，此 question/solution 与 REDUX 无关！

问题是您正在尝试使用 React 和 Jquery 让您的页面做一些很酷的事情。

你真的应该选择其中之一。

$(document).foundation() 是一个 Jquery 库。

相反，您应该使用 React Foundation 之类的东西，它会删除 jquery 依赖项并为您提供使用 React 构建的基础组件。

Answer 2

您可以在 React 中 componentDidMount 具有 reval modal 或更好的组件内部执行 $(document).foundation() 您可以在应用程序中最顶层的 componentDidMount 中执行此操作。

React 中的

componentDidMount 在挂载与该组件相关的所有 DOM 节点后运行一次。如果 $(document).foundation() 在 componentDidMount 内运行，它的作用是将事件处理程序绑定到具有基础相关属性（如数据下拉或数据显示）的元素上。

componentDidMount() {
  $(document).foundation();
}

React Component: Foundation Modal (Reveal) 打不开

React Component: Foundation Modal (Reveal) won't open

reactjs

zurb-foundation

zurb-foundation-6