Question

我正在尝试将this map合并到现有的grails / react项目中。

更新的代码：

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>

和

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

有什么建议吗？谢谢！

更新：

现在加载页面......但是地图应该只是一个空白div。我在控制台中收到此错误：

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)

Answer 1

React中的

refs需要获取React组件中的底层DOM。一旦在组件中可用，就可以在jQuery元素上调用第三方库函数，如vectorMap。以下是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'));

以下示例codepen不起作用，因为我无法提供jqueryvectormap库的适当版本。

exported and modified version of the above codepen有效。 git clone然后在浏览器中打开index.html。

Answer 2

您应该使用React的一个组件生命周期方法来执行您的功能，而不是尝试呈现内联脚本标记。尝试从render方法中删除内联脚本并添加componentDidMount方法：

componentDidMount() {
  $(your jQuery function here);
}

假设您正在使用webpack，您可能希望将jquery声明为外部，但上述内容应该至少可以启动并运行。

Answer 3

而不是：

let NorthAmerica = React.createClass({

您可以直接导出：

export default class NorthAmerica extends React.Component {

然后删除最后一个代码块：

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

您无法看到任何内容的原因是因为您的NorthAmerica组件尚未添加到DOM中。尝试：

ReactDOM.render(
  <NorthAmerica />,
  document.getElementById('root')
);

如果'index'被index.gsp中的div名称替换，而index.gsp是所有反应内容的容器，请参阅enter link description here

为此，您需要额外导入：

import ReactDOM from 'react-dom';

只有在使用其他文件中的NorthAmerica时才需要导出。如果您尚未这样做，则不需要，请参阅here

如何在react组件中嵌入并调用外部javascript函数？

3 个答案: