Question

所以我试图从jvectormap插入一个Web应用程序的地图。这是我的northAmerica.js代码：

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


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


    render(){
        return(
            <div>
                <button id="back"><Link to="/discover" style={{display: 'block', height: '100%'}}></Link></button>
                <h1>NORTH AMERICA MAP PLACE-HOLDER</h1>
                <div ref={display => this.display = display} style={{width: '600px', height: '400px'}}/>
            </div>
        )
    }
}

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

northAmerica.js是一个子菜单页面，它将传递给页面index.js以呈现给DOM。

index.gsp是index.js导出到的.html页面。

<!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"/>
    <script src="jquery-jvectormap-2.0.3.min.js"></script>
    <script src="jquery-jvectormap-world-mill.js"></script>
    <script src="jquery-3.1.1.min.js"></script>

</head>
<body>
<div id="root" align="left"></div>
<br/>
<asset:javascript src="bundle.js"/>
</body>
</html>

网络应用导航到这个＆＃34;北美＆＃34;页面，但没有地图。

我的代码中是否有某些内容关闭或者是否可能是我的文件放置？

在React中创建jvectormap

0 个答案: