Question

所以我刚刚开始学习React和Redux，所以如果这是一个非常低调的问题我会道歉。但我已经清空了我的谷歌报价，并且无法找到任何可以帮助我的信息。

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

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;

带链接的组件呈现一些东西，但基本上有一个

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

标记在其中。

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

所以我的问题有两个问题： 1.当我的ComponentModal完成渲染时，我如何在Redux中运行$(document).foundation();？也许我错了，但我不能使用componentDidMount()方法，在那里打电话可能有意义吗？这是一种完全错误的方式吗？

希望它不会太混乱，也不会太愚蠢的问题：）

Answer 1

仅供参考，这个问题/解决方案与REDUX无关！

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

你应该选择其中一个。

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

相反，您应该使用类似React Foundation的内容来删除jquery依赖项，并为您提供使用react构建的基础组件。

Answer 2

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

在安装了与该组件相关的所有DOM节点之后，React中的

componentDidMount运行一次。 $(document).foundation()在componentDidMount内运行时所做的是，它会绑定具有基础相关属性（如数据下拉或数据显示）的元素上的事件处理程序。

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

反应组件：基础模态（显示）不会打开

2 个答案: