React.jsでのZURB Foundation Revealの使用

私はreactjsでfoundation "reveal"を使ってモーダルウィンドウを開こうとしています。React.jsでのZURB Foundation Revealの使用

私は純粋なReactアプリケーションだけではなく、バックエンドのPythonも持っていて、私が使っているすべてのjquery/foundation.js要素のReact Replacementsが見つかりませんでした。

ユーザーが都市/場所をフォームに送信した後に市街地に情報/エラーが表示されないようにするために、モーダルを開きたいとします。

コンポーネント

import React, {Component} from 'react'; 

class ErrorModal extends Component { 

    ComponentDidMount() { 
     $('#modal').foundation('reveal', 'open'); 
    } 

    render() { 
     return (
      <div className="reveal" id="modal" data-reveal> 
       <h1>Awesome. I Have It.</h1> 
       <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p> 
       <button className="close-button" data-close aria-label="Close modal" type="button"> 
       <span aria-hidden="true">&times;</span> 
       </button> 
      </div> 
     ); 
} 
}

私はCDNを使用して基盤をインポートします。

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.js"></script>

私も試してみました：

は、モーダル= newFoundation.Reveal（$（ '＃モーダル））しましょう; modal.open（）;

私は、次のエラーが表示されます

エラー「$」の無はundefを定義されていないされていません。同じjQueryを使ってみました。

ボイラープレートを作成するには、create-reactions-app（https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html->グローバルにインストールされています）を使用しました。このため、webpackの設定はありません。package.jsonのみです。

JavaScriptがインストールされていないファンデーションが正常に動作していて、jqueryが正しく読み込まれています。使用jQueryのために

出典

2016-09-30 user3541631