如何在 React 组件中嵌入和调用外部 javascript 函数？答案

【问题标题】：How do you embed and call an external javascript function in a react component?如何在 React 组件中嵌入和调用外部 javascript 函数？
【发布时间】：2017-02-25 22:28:26
【问题描述】：

我正在尝试将 this map 合并到现有的 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)

【问题讨论】：

标签： javascript reactjs grails

【解决方案1】：

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

这里是 codepen 的示例，它不起作用，因为我无法提供适当版本的 jqueryvectormap 库。

exported and modified version of the above codepen 有效。 git clone 然后在浏览器中打开index.html。

【讨论】：

哇，太棒了。我只有一个问题。对于这个项目，我们从每个大陆的各种 js 文件导出到一个 index.js 文件，该文件呈现给 DOM。我应该在哪里链接到源 jvector 文件和 jquery 文件？ html文件还在吗？这是一个 grails 项目。由于我使用多个 js 文件，我应该从每个文件中调用 export 吗？谢谢。
我不确定我是否理解您所说的“从各种 js 导出”是什么意思。但是由于您使用的是 react，因此您可以创建一个包含所有这些子组件的父组件，例如 WorldMap 组件。至于 jquery 和 jvectormap 库等静态资源，您可以使用最新 Grails 应用程序中内置的 grails asset-pipeline。
我已经实现了您的代码并更新了问题以及我遇到的控制台错误。我现在不知道该怎么办 :( 感谢您的帮助。非常感谢。
确保使用了this 库。参考github中的示例应用。
无论出于何种原因，事实证明，要使您的代码正常工作，我所要做的就是将 $(el)... 更改为 jQuery(el)... 再次感谢您的帮助！

【解决方案2】：

您应该使用 React 的组件生命周期方法之一来执行您的函数，而不是尝试呈现内联脚本标记。尝试从 render 方法中移除内联脚本并添加 componentDidMount 方法：

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

假设您使用的是 webpack，您可能希望将 jquery 声明为外部的，但以上内容至少应该可以启动并运行。

【讨论】：

【解决方案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 的名称，它是所有反应内容的容器，请参阅 enter link description here

为此，您需要额外的导入：

import ReactDOM from 'react-dom';

仅当您从另一个文件使用 NorthAmerica 时才需要导出。如果您还没有这样做，则不需要，请参阅here

【讨论】：