如何在react組件中嵌入並調用外部javascript函數？

Question

我正在嘗試將此地圖合並到現有的grails / react項目中。

更新的代碼：

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/>);
    }
}

有什么建議？ 謝謝！

更新：

頁面加載現在...但地圖應該是一個空白div。 我在控制台中收到此錯誤：

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)

Answer 1

React中的refs需要抓取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'));

下面是示例codepen不起作用，因為我無法提供適當版本的jqueryvectormap庫。

上述codepen的導出和修改版本可以使用。 git clone然后在瀏覽器中打開index.html 。

Answer 2

您應該使用React的一個組件生命周期方法來執行您的函數，而不是嘗試呈現內聯腳本標記。 嘗試從render方法中刪除內聯腳本並添加componentDidMount方法：

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

假設您正在使用webpack，您可能希望將jquery聲明為外部，但上面應該至少可以啟動並運行。

Answer 3

代替：

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')
);

其中'root'替換為index.gsp中div的名稱，它是所有反應內容的容器，請參閱此處輸入鏈接描述

為此，您需要額外導入：

import ReactDOM from 'react-dom';

僅在從其他文件使用NorthAmerica時才需要導出。 如果您還沒有這樣做，那么就不需要了，請看這里

如何在react組件中嵌入並調用外部javascript函數？

問題描述

3 個解決方案

解決方案1
1 已采納 2017-02-26 01:46:21

解決方案2
0 2017-02-25 22:51:52

解決方案3
0 2017-02-25 23:15:16

如何在react組件中嵌入並調用外部javascript函數？

問題描述

3 個解決方案

解決方案1 1 已采納 2017-02-26 01:46:21

解決方案2 0 2017-02-25 22:51:52

解決方案3 0 2017-02-25 23:15:16

解決方案1
1 已采納 2017-02-26 01:46:21

解決方案2
0 2017-02-25 22:51:52

解決方案3
0 2017-02-25 23:15:16