如何在react组件中嵌入并调用外部javascript函数？
[英]How do you embed and call an external javascript function in a react component?
问题描述
I'm trying to incorporate this map into an existing grails/react project. 
我正在尝试将此地图合并到现有的grails / react项目中。
Updated code: 更新的代码：
index.js 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 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. 页面加载现在...但地图应该是一个空白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)
3 个解决方案
解决方案1
1 已采纳 2017-02-26 01:46:21
refs in React is required to grab the underlying DOM inside the React component. React中的refs需要抓取React组件中的底层DOM。 Once that is available in the component, third party library functions like vectorMap can be called on the jQuery element. 一旦在组件中可用，就可以在jQuery元素上调用第三方库函数，如vectorMap 。 Here is an example of the React component assuming all appropriate dependent libraries are available to render DOM. 下面是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'));
Here is the example codepen which does not work because I wasn't able to provide an appropriate version of jqueryvectormap library. 下面是示例codepen不起作用，因为我无法提供适当版本的jqueryvectormap库。
An exported and modified version of the above codepen works. 上述codepen的导出和修改版本可以使用。 git clone then open index.html in browser. git clone然后在浏览器中打开index.html 。
解决方案2
0 2017-02-25 22:51:52
You should use one of React's component lifecycle methods to execute your function rather than trying to render an inline script tag. 您应该使用React的一个组件生命周期方法来执行您的函数，而不是尝试呈现内联脚本标记。 Try removing the inline script from the render method and adding a componentDidMount method: 尝试从render方法中删除内联脚本并添加componentDidMount方法：
componentDidMount() {
$(your jQuery function here);
}
Assuming you're using webpack, you'll probably want to declare jquery as an external, but the above should at least get things up and running. 假设您正在使用webpack，您可能希望将jquery声明为外部，但上面应该至少可以启动并运行。
解决方案3
0 2017-02-25 23:15:16
Instead of: 代替：
let NorthAmerica = React.createClass({
You can export this straight away: 您可以直接导出：
export default class NorthAmerica extends React.Component {
and then delete your last code block: 然后删除最后一个代码块：
export class northAmerica extends React.Component{
render(){
return(<NorthAmerica/>);
}
}
The reason you can't see anything is because your NorthAmerica component is not added to the DOM yet. 您无法看到任何内容的原因是因为您的NorthAmerica组件尚未添加到DOM中。 Try: 尝试：
ReactDOM.render(
<NorthAmerica />,
document.getElementById('root')
);
Where 'root' is replaced with the name of a div in your index.gsp which is the container for all react content, refer to enter link description here 其中'root'替换为index.gsp中div的名称，它是所有反应内容的容器，请参阅此处输入链接描述
For this to work you will need an extra import: 为此，您需要额外导入：
import ReactDOM from 'react-dom';
Export is only required if you are using NorthAmerica from another file. 仅在从其他文件使用NorthAmerica时才需要导出。 If you are not doing that yet then it is not required, see here 如果您还没有这样做，那么就不需要了，请看这里
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.