React Component：Foundation Modal（Reveal）が開かない

Question

私は今、ReactとReduxの学習を始めました。しかし私は私のGoogleの引用を空にして、私を助けるものを見つけることができません。

私はReact、Redux、and Foundation 6のサイトで働いています。私のReactコンポーネントの1つにリンクがあり、クリックするとそのリンクに対して特定の警告を持つModalが開きます。

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()メソッドを利用することはできません。その呼び出しを行うのが理にかなっていますか？ 2.これは間違っていますか？

が、それはあまりにも馬鹿すぎて混乱していない問題ではありません願っています:)

Answer 1

FYI、この質問/ソリューションはREDUXとは何の関係もありません！

問題はReact AND Jqueryを使用してページをクールにすることです。

本当にどちらか一方を選択する必要があります。

$(document).foundation()は、Jqueryライブラリです。

代わりに、React Foundationのようなものを使用してjqueryの依存関係を削除し、反応で構築された基礎コンポーネントを提供する必要があります。

Answer 2

$(document).foundation()はReact insideにありますcomponentDidMountはrevalがモーダルまたはそれ以上のコンポーネントですが、これはアプリで一番下位のコンポーネントのcomponentDidMountで行うことができます。

componentDidMount Reactのコンポーネントは、そのコンポーネントに関連するすべてのDOMノードがマウントされた後に1回実行されます。 $(document).foundation()は、componentDidMountの内部で実行されている場合、データドロップダウンやデータ公開などの基礎が実現された属性を持つ要素のイベントハンドラをバインドします。

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