如何在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