Question

从northAmerica.js组件类调用方法时如下：

Ignoring posix-spawn-0.3.13 because its extensions are not built.  Try: gem pristine posix-spawn --version 0.3.13

我收到以下错误：

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


class NorthAmerica extends Component {

    componentDidMount() {

        <script src='assets/jquery-jvectormap-2.0.3.min.js'></script>;
        <script src='assets/jquery-jvectormap-world-mill-en.min.js'></script>;
        $('#world-map').vectorMap({map: 'world_mill_en'});
    }

    render(){
        return(
            <div>
                <script src="jquery-3.1.1.js"/>
                <script src="jquery-jvectormap-2.0.3.min.js"/>
                <script src="jquery-jvectormap-world-mill-en.min.js"/>
                <h1>NORTH AMERICA MAP PLACE-HOLDER</h1>
                <li><Link to="/discover">DISCOVER</Link></li>
                <div id="world-map" />
            </div>
        )
    }
}

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

我也是这样试过的：

bundle.js?compile=false:23794 Uncaught TypeError: (0 , _jquery2.default)(...).vectorMap is not a function
    at NorthAmerica.componentWillMount (bundle.js?compile=false:23794)
    at bundle.js?compile=false:27669
    at measureLifeCyclePerf (bundle.js?compile=false:27396)
    at ReactCompositeComponentWrapper.performInitialMount (bundle.js?compile=false:27668)
    at ReactCompositeComponentWrapper.mountComponent (bundle.js?compile=false:27579)
    at Object.mountComponent (bundle.js?compile=false:3177)
    at ReactCompositeComponentWrapper.performInitialMount (bundle.js?compile=false:27692)
    at ReactCompositeComponentWrapper.mountComponent (bundle.js?compile=false:27579)
    at Object.mountComponent (bundle.js?compile=false:3177)
    at ReactCompositeComponentWrapper._updateRenderedComponent (bundle.js?compile=false:28086)

但是，从index.gsp调用文件时（如下所示），地图可以正常工作。

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

我已尝试在很多地方包含资源和脚本src，并且它在运行时被捆绑并显示在浏览器控制台中......但该组件仍然无法找到该方法。 northAmerica.js文件将传递给index.js，如下所示：

<!doctype html>
<html>
<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">
    <asset:javascript src="jquery-3.1.1.js"/>
    <asset:javascript src="jquery-jvectormap-2.0.3.min.js"/>
    <asset:javascript src="jquery-jvectormap-world-mill-en.min.js"/>

</head>
<body>

<div id="root" align="left"></div>
<br/>
<script src='assets/jquery-jvectormap-2.0.3.min.js'></script>
<script src='assets/jquery-jvectormap-world-mill-en.min.js'></script>
<asset:javascript src="bundle.js"/>
<div id="world-map" style="width: 600px; height: 400px"></div>
<script>
    $(function(){
        $('#world-map').vectorMap({map: 'world_mill_en'});
    });
</script>
</body>
</html>

有关从哪里开始的任何建议？非常感谢！

如何在react类中调用外部javascript库中的方法？

0 个答案: