你如何在反应组件中嵌入和调用外部JavaScript函数？ [英] How do you embed and call an external javascript function in a react component?
问题描述
我正在尝试将此地图合并到现有的grails / react项目中。
更新的代码：
index.js
<$ （
<路由器历史记录= {browserHistory}>
<路径路径=/组件= {CreateAccount} />
< Route path =/ menucomponent = {Menus} />
< Route path =/ discovercomponent = {DiscoverApp} />
< Route path =/ NorthAmericacomponent = {northAmerica} />
< Route path =/ Africacomponent = {africa } />
< Route path =/ Australiacomponent = {australia} />
< / Router>
），document.getElementById ）） ;
index.gsp
< HEAD>
< title> Food App< / title>
< link rel =stylesheethref =$ {resource（dir：'css'，file：'text.css'）}type =text / css>
< 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 =rootalign =left>< / div>
< br />
< asset：javascript src =bundle.js/>
< / body>
< / html>
和
从'react'导入React，{Component};
从'react-router'导入{Link};
从'jquery'导入$;
从'react-dom'导入ReactDOM;
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 =显示}
/>
< / div>
）
}
}
export class northAmerica extends React.Component {
render（）{
return（< NorthAmerica />）;
}
}
有什么建议吗？谢谢！
更新：
现在加载页面......但地图应该只是一个空白DIV。我在控制台中得到这个错误：
Uncaught TypeError：（0，_jquery2.default）（...）。vectorMap is不是函数
在NorthAmerica.componentDidMount（bundle.js？compile = false：12781）
在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在ReactReconcileTransaction.closeAll（bundle.js？compile = false：5241）
ReactReconcileTransaction.perform（bundle.js？compile = false：5188）
在ReactUpdatesFlushTransaction
。
at ReactUpdatesFlushTransaction.perform（bundle.js？compile = false：1438）
refs 需要抓取React组件中的底层DOM。一旦在组件中可用，可以在jQuery元素上调用第三方库函数，如 vectorMap 。这里是一个React组件的例子，假设所有合适的依赖库都可用于呈现DOM。
import React，{Component} from 反应;
从'react-dom'导入ReactDOM;
从'jquery'导入$;
类NorthAmerica扩展组件{
componentDidMount（）{
const el = ReactDOM.findDOMNode（this.display）;
$（el）.vectorMap（{map：'world_mill_en'}）;
}
render（）{
return< div>
< h1>世界地图< / h1>
< div
ref = {display => this.display = display}
style = {{width：'600px'，height：'400px'}}
/>
< / div>;
$ b $ * b $ b *将上述组件渲染到div＃app
* /
中ReactDOM.render（< NorthAmerica /> ;, document.getElementById（'app'））;
以下是 codepen ，因为我无法提供适当版本的 jqueryvectormap 库
导出并修改上述codepen的版本作品。 git clone然后在浏览器中打开 index.html 。
I'm trying to incorporate this map into an existing grails/react project.
Updated code:
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>
and
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/>);
}
}
Any suggestions? Thanks!
Updated:
Page loads now... but where the map should be is just a blank div. I get this error in the console:
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)
refs in React is required to grab the underlying DOM inside the React component. Once that is available in the component, third party library functions like vectorMap can be called on the jQuery element. Here is an example of the React component assuming all appropriate dependent libraries are available to render 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'));
Here is the example codepen which does not work because I wasn't able to provide an appropriate version of jqueryvectormap library.
An exported and modified version of the above codepen works. git clone then open index.html in browser.
这篇关于你如何在反应组件中嵌入和调用外部JavaScript函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
