程序员经验分享-hwhale

如何在 React 组件中嵌入和调用外部 JavaScript 函数？

2024-01-25

我正在尝试合并this map http://jvectormap.com/tutorials/getting-started/到现有的 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'));

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

有什么建议么？谢谢！

Updated:

页面现在加载...但是地图应该在的位置只是一个空白 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)

refs https://facebook.github.io/react/docs/refs-and-the-dom.html在 React 中需要获取 React 组件内的底层 DOM。一旦在组件中可用，第三方库就会发挥作用，例如vectorMap可以在 jQuery 元素上调用。这是一个 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 https://codepen.io/anon/pen/WpbYgQ这不起作用，因为我无法提供适当的版本jqueryvectormap图书馆。

An 上述 codepen 的导出和修改版本 https://github.com/dmahapatro/react-jvectormap作品。 git克隆然后打开index.html在浏览器中。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

ReactJS

grails

如何在 React 组件中嵌入和调用外部 JavaScript 函数？ 的相关文章

  • 如何检查是否存在可能的路径？

    我正在开发一个基于 javascript 的实验性游戏 玩家必须在二维平铺地图上移动才能退出 请随意检查这个小提琴并演奏 http jsfiddle net moonlife 74vLd 我只是随机放置障碍物 但有时障碍物会挡住玩家和出口之

  • 在 JavaScript 函数中加载图像

    我有获取图像像素颜色的功能 function getImage imgsrc var img img src imgsrc var imageMap new Object img load function var canvas

  • React中如何触发同级组件的函数？

    I am new to front end world and could not figure out how to trigger a function from a sibling component Lets say I have

  • Dialogflow Fulfillment Webhook 调用失败

    I am new to dialogflow fulfillment and I am trying to retrieve news from news API based on user questions I followed doc

  • 需要参数的addEventListener（和removeEventListener）函数

    我需要向 8 个对象 手掌 添加一些侦听器 这些对象是相同的 但行为必须根据它们的位置而改变 我有以下 丑陋的 代码 root palmsStatus B B B B B B B B if root palmsStatus 0 N root

  • 在 React 中使用 .less 文件

    我正在尝试将 less 文件与极简主义 React 应用程序一起使用 使用创建反应应用程序 我已经添加less and less loader to my 包 json以及我的模块规则webpack config js文件 然而 类引用并未

  • 从对象中取出具有无效（NaN、空白等）值的键的最佳方法？

    我有一个供用户填写的简短搜索表单 将有多个搜索查询进入 MongoDB 该表单创建一个名为的变量searchParams可能看起来像这样 var searchParams city Springfield bedrooms 3 bathro

  • 自调用函数未定义

    如果我声明一个函数文字 var x function alert hi console log x returns the function code However var x function alert hi console log

  • 修改 Twitter 帖子上可编辑 Div 的内容

    我正在编写一个 chrome 扩展 它可以帮助用户在 Twitter 上输入内容 当在 twitter 上写推文时 twitter 会打开一个可编辑的 div 容器 当用户输入内容时 twitter 大概正在使用某些网络框架 会生成子 di

  • Rangy：插入符号下的单词（再次）

    我正在尝试创建一个预输入代码以添加到 wysihtml5 富文本编辑器 基本上 我需要能够插入人员 标签引用 例如 Twitter Github Facebook 我发现一些人试图实现同样的事情的代码 http jsfiddle net A

  • Socket IO 服务器到服务器

    服务器是否可以使用 Socket IO 连接到另一个服务器并被视为客户端 并让它加入房间 接收 io sockets in lobby emit 和更多 第一个服务器也在监听连接 消息 嘿 Brad 下面是我的完整 js 应用程序 供参考

  • 使 Bootstrap Popover 在悬停而不是单击时出现/消失

    我正在使用 Bootstrap 构建一个网站Popover http twitter github com bootstrap javascript html popovers我不知道如何使弹出窗口出现在悬停而不是单击时 我想做的就是当有人

  • Angularjs : $locationProvider.hashPrefix("!") ;

    我想将网址显示为 www test com 因为我正在使用 locationProvider hashPrefix 但它显示网址为 www test com 我想 哈希之前而不是哈希之后 Thanks var app angular mod

  • 如何使用 jQuery 单击特定链接时打开引导导航选项卡的特定选项卡？

    我是 jquery 和 bootstrap 的新手 所以请考虑我的错误 我已经创建了一个用于登录和注册的 bootstrap 模式 它包含两个导航选项卡 称为登录和注册 我有两个按钮可以弹出相同的模态窗口 但在模态窗口内显示不同的选项卡 每

  • for循环中需要声明变量吗？

    有什么区别 for var i 0 i lt 5 i for i 0 i lt 5 i 是否有必要包含 var 关键字 我知道 var 关键字会影响变量范围 但我无法理解是否有必要在 for 循环中包含该关键字 在第二个示例中 您的变量是全

  • 使用 ng-if 改变角度方向

    我想通过单击将方向从 rtl 更改为 ltr and in 设置 html

  • 标记（Markdown）+ Mermaid（流程图和图表）

    努力去争取 美人鱼 https github com knsv mermaid https github com knsv mermaid跟 共事 标记 https github com chjj marked https github c

  • 绘制多边形

    我正在使用 Google Maps API V3 根据路径绘制多边形 该路径是随机未排序坐标点 LatLng 的数组 这会产生以下形状 Polylines intersect Problem 由于多边形的形状取决于路径中点的顺序 因此如何对

  • Chrome 调试器注入 javascript

    我有这样的好奇心 是否可以以某种方式在我的页面中注入 javascript 并执行它并调试它 正如您在控制台中所做的那样 但在控制台中您无法暂停并观察变量 是否可以调试我通过控制台输入的代码 为什么无法调试通过 XHR 接收的代码 Than

  • 为什么 try catch 块没有捕获 Promise 异常？

    我对承诺的错误处理感到困惑 答案可能很明显 但我不明白 我有以下示例代码 var test async function throw new Error Just another error try test then catch err

随机推荐

热门标签