如何在反應組件中嵌入和調用外部JavaScript函數？

我正在嘗試將this map合併到現有的grails/react項目中。如何在反應組件中嵌入和調用外部JavaScript函數？

更新代碼：

index.js

ReactDOM.render((

    <Router history = {browserHistory}> 
     <Route path="/" component={CreateAccount}/> 
     <Route path="/menu" component={Menus}/> 
     <Route path="/discover" component={DiscoverApp}/> 

     <Route path="/NorthAmerica" component={northAmerica}/> 
     <Route path="/SouthAmerica" component={southAmerica}/> 
     <Route path="/Europe" component={europe}/> 
     <Route path="/Asia" component={asia}/> 
     <Route path="/Africa" component={africa}/> 
     <Route path="/Australia" component={australia}/> 
    </Router> 

), document.getElementById('root'));

index.gsp中

<head> 
     <title>Food App</title> 
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'text.css')}" type = "text/css"> 
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'jquery-jvectormap-2.0.3.css')}" type = "text/css" media="screen"> 
<javascript src="/js/jquery-3.1.1.js" /> 
<javascript src="jquery-jvectormap-2.0.3.min.js" /> 
<javascript src="jquery-jvectormap-world-mill-en.mins.js" /> 
</head> 
<body> 
<div id="root" align="left"></div> 
<br/> 
<asset:javascript src="bundle.js"/> 
</body> 
</html>

和

import React, { Component } from 'react'; 
import {Link} from 'react-router'; 
import $ from 'jquery'; 
import ReactDOM from 'react-dom'; 

class NorthAmerica extends Component { 

    componentDidMount() { 
     const el = ReactDOM.findDOMNode(this.display); 
     $(el).vectorMap({map: 'world_mill_en'}); 
    } 

    render(){ 
     return(
      <div> 
       <h1>NORTH AMERICA MAP PLACE-HOLDER</h1> 
       <li><Link to="/discover">DISCOVER</Link></li> 
       <div 
        ref={display => this.display = display} 
       /> 
      </div> 
     ) 
    } 
} 

export class northAmerica extends React.Component{ 
    render(){ 
     return(<NorthAmerica/>); 
    } 
}

有什麼建議？謝謝！

更新時間：

頁面加載現在......但是那裏的地圖應該只是一個空白格。我在控制檯中此錯誤：

Uncaught TypeError: (0 , _jquery2.default)(...).vectorMap is not a function 
    at NorthAmerica.componentDidMount (bundle.js?compile=false:12781) 
    at bundle.js?compile=false:26803 
    at measureLifeCyclePerf (bundle.js?compile=false:26613) 
    at bundle.js?compile=false:26802 
    at CallbackQueue.notifyAll (bundle.js?compile=false:9088) 
    at ReactReconcileTransaction.close (bundle.js?compile=false:31708) 
    at ReactReconcileTransaction.closeAll (bundle.js?compile=false:5241) 
    at ReactReconcileTransaction.perform (bundle.js?compile=false:5188) 
    at ReactUpdatesFlushTransaction.perform (bundle.js?compile=false:5175) 
    at ReactUpdatesFlushTransaction.perform (bundle.js?compile=false:1438)

來源

2017-02-25 Strobe00

refs React需要抓取React組件中的底層DOM。一旦在組件中可用，可以在jQuery元素上調用第三方庫函數，如vectorMap。以下是React組件的一個示例，假定所有適當的相關庫都可用於呈現DOM。

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import $ from 'jquery'; 

class NorthAmerica extends Component { 
    componentDidMount() { 
    const el = ReactDOM.findDOMNode(this.display); 
    $(el).vectorMap({map: 'world_mill_en'}); 
    } 

    render() { 
    return <div> 
     <h1>World Map</h1> 
     <div 
     ref={display => this.display = display} 
     style={{width: '600px', height: '400px'}} 
     /> 
    </div>; 
    } 
} 

/* 
* Render the above component into the div#app 
*/ 
ReactDOM.render(<NorthAmerica />, document.getElementById('app'));

這是不工作，因爲我無法提供jqueryvectormap庫的相應版本的例子codepen。

一個exported and modified version of the above codepen的作品。 git clone然後在瀏覽器中打開index.html。

來源

2017-02-26 01:46:21 dmahapatro

哇，太棒了。我只有一個問題。對於這個項目，我們從每個大洲的各種js文件導出到一個呈現給DOM的index.js文件。我應該在哪裏鏈接到源jvector文件和jquery文件？該html文件仍然？這是一個Grails項目。因爲即時通訊使用多個JS文件，我應該從每一個調用導出？謝謝。 – Strobe00

我不確定我是否理解「從各種js中導出」的含義。但是，由於您使用的是反應，您可以創建一個包含所有這些子項的父組件，比如說一個「WorldMap」組件。就像jquery和jvectormap庫這樣的靜態資產而言，您可以使用內置的[grails asset-pipeline]（https://bertramdev.github.io/grails-asset-pipeline/guide/introduction.html）在最新的Grails應用程序中。 – dmahapatro

我已經實現了您的代碼並更新了問題以及我遇到的控制檯錯誤。我不知道現在該怎麼辦:( 感謝您的幫助。非常感謝。 – Strobe00

您應該使用的陣營的組件生命週期方法之一來執行你的函數，而不是試圖呈現一個內嵌的腳本。嘗試從渲染方法去除內嵌腳本並添加componentDidMount方法：

componentDidMount() { 
    $(your jQuery function here); 
}

假設你正在使用的WebPack，你可能會想聲明的jQuery作爲外部，但上面至少應該得到的東西了並跑步。

來源

2017-02-25 22:51:52

相反的：

let NorthAmerica = React.createClass({

您可以導出此直線距離：

export default class NorthAmerica extends React.Component {

，然後刪除您的最後一個代碼塊：

export class northAmerica extends React.Component{ 
    render(){ 
     return(<NorthAmerica/>); 
    } 
}

你看不到的原因任何事情都是因爲你的NorthAmerica組件沒有被添加到DOM中。嘗試：

ReactDOM.render(
    <NorthAmerica />, 
    document.getElementById('root') 
);

其中「根」被替換爲您index.gsp中一個div的名字是容器的所有內容作出反應，指enter link description here

對於這個工作，你需要一個額外進口：

import ReactDOM from 'react-dom';

僅當您從其他文件使用NorthAmerica時才需要導出。如果您還沒有這樣做，那麼它不是必需的，請參閱here

來源

2017-02-25 23:15:16 2chur

如何在反應組件中嵌入和調用外部JavaScript函數？

回答

相關問題