在React.js中使用ZURB Foundation Reveal

我試圖在reactjs中使用基礎「顯示」來打開模式窗口。在React.js中使用ZURB Foundation Reveal

我沒有開發一個純粹的React應用程序，而是在後端Python中也有開發，而且我沒有找到React替換所有我使用的jquery/foundation.js元素。

我想在用戶在表單中提交城市/位置後打開模式，並且該城市沒有信息/錯誤（所以不是點擊）。

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（）;

我收到以下錯誤：

錯誤「$」沒有定義沒有民主基金;我嘗試使用jQuery，一樣。

要創建樣板我使用了create-react-app（全局安裝的https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html - >），所以我沒有webpack配置，只有package.json。

沒有javascript的基礎工作正常，jquery加載正常。

來源

2016-09-30 user3541631

對於使用jQuery試試這個文件的頭部：

import $ from 'jquery'

來源

2016-10-15 16:18:51 Oleksandr

在React.js中使用ZURB Foundation Reveal

回答

相關問題