Javascript 在React中创建jvectormap_Javascript_Jquery_Reactjs_Dom_Jvectormap

Javascript 在React中创建jvectormap

javascript jquery reactjs dom

Javascript 在React中创建jvectormap,javascript,jquery,reactjs,dom,jvectormap,Javascript,Jquery,Reactjs,Dom,Jvectormap,因此，我尝试从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{ componentDidMoun

因此，我尝试从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/>);
    }
}

import React，{Component}来自“React”
从“反应路由器”导入{Link}
从“react dom”导入react dom；
从“jquery”导入美元；
类北美扩展组件{
componentDidMount（）{
const el=ReactDOM.findDOMNode（this.display）；
$（el.vectorMap（{地图：'世界工厂'}）；
}
render（）{
返回(
北美地图占位符
this.display=display}style={{{width:'600px'，height:'400px'}}/>
)
}
}
导出类北美扩展React.Component{
render（）{
return（）；
}
}

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>


食品应用

该web应用程序可导航到此“北美”页面，但没有地图

我的代码中是否有关闭的内容，或者可能是文件的位置

你能检查html看它是否呈现了任何东西吗？哦，不，是的。它使一切都很好。即使是北美页面，而不是地图本身，您可以动态添加脚本吗？这可能是因为页面加载时元素不在那里，然后react呈现它。服务器端呈现也可能有帮助