需求:

界面新增一个“导入项目”按钮,点击该按钮可以执行项目导入功能。按钮点击事件部分是jsx语法代码,而项目导入部分是封装的js语法代码,假设此处用alert("123")代替。若点击按钮出现alert("123")弹框,表示onClick事件执行了js语法代码。

具体示例如下:

项目导入部分ImportProject.js文件:

export const IMPP = {
click_alert:function(){
alert("");
}
};

jsx里引入js文件部分:

import {IMPP} from'./ImportProject.js';

jsx里按钮点击事件部分:

render() {
return (
<button type="button" className="ant-btn btn-filter ant-btn-primary" onClick={()=>(IMPP.click_alert())}><span>导入项目</span></button>
);
}

效果图:

点击“导入项目”按钮,即可触发ImportProject.js中的函数:

React中jsx调用js例子的更多相关文章

  1. React中JSX的理解

    React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ...children)的语法糖,同时JSX也是J ...

  2. 在Java中直接调用js代码(转载)

    http://blog.csdn.net/xzyxuanyuan/article/details/8062887 JDK1.6版添加了新的ScriptEngine类,允许用户直接执行js代码. 在Ja ...

  3. 在Java中直接调用js代码

    JDK1.6版添加了新的ScriptEngine类,允许用户直接执行js代码. 在Java中直接调用js代码 不能调用浏览器中定义的js函数,会抛出异常提示ReferenceError: “alert ...

  4. 在react中使用intro.js的的一些经验

    react逐渐热了起来,但是新的东西毕竟前辈的经验少一些,前段时间自己在react中用到intro.js时,得到的资料甚少,摸索后便将一些心得记录下来了~ 1 intro.js的引入,这一点请看上一篇 ...

  5. android 中webview调用js

    1.android中利用webview调用网页上的js代码. Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true ...

  6. react中直接调用子组件的方法(非props方式)

    我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的. 显而易见,这个执行 ...

  7. [转]html里a标签中href调用js的几种方法

    文章转自:https://blog.csdn.net/best_luxi/article/details/45062301 我们常用的在a标签中有点击事件: 1. a href=”javascript ...

  8. 【React】在React中 JSX 代码如何转成 JS 代码?

    一.介绍 写 React 代码的朋友应该都是直接写 JSX 代码,JSX 让我们可以在 JS 中直接写 HTML 代码,可阅读性较高.本章节主要介绍 JSX 通过 babel 转换后会生成什么样式代码 ...

  9. react中jsx文件是如何转换成js对象的

    通过在线babel转换器,转换出jsx是如何变成js对象的 jsx文件 加入了正常的标签以及嵌套标签以及方法属性 function hello() { click=()=>{ console.l ...

随机推荐

  1. (摘)timeout Timeout时间已到.在操作完成之前超时时间已过或服务器未响应的几种情况

    Timeout时间已到.在操作完成之前超时时间已过或服务器未响应 问题 在使用asp.net开发的应用程序查询数据的时候,遇到页面请求时间过长且返回"Timeout时间已到.在操作完成之间超 ...

  2. layer.photos()异步修改图片地址后显示异常

    项目中有一个图片有预览(用的layer.photos()),需要异步修改图片地址,但是成功修改后第一次预览会显示修改前的大图,第二次以后就都正常了. 尝试修改成功后再次调用layer.photos() ...

  3. 微擎模块的安装文件manifest.xml

    微擎在安装或卸载模块时会根据manifest.xml生成(或删除)数据库中相应记录,并执行manifest.xml里指定的脚本. manifest.xml文件内容详细介绍如下: manifest - ...

  4. 微信公众号签名错误 invalid signature

    在出现了 invalid signature签名错误后按照以下步骤进行校验1.确认签名算法正确,可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=j ...

  5. Android项目实战登录&注册

    由于项目中大部分界面都有一个后退键和一个标题栏,为避免代码冗杂以及便于利用,我们可以将后推荐和标题栏单独抽取出来定义一个标题栏布局,在 res/layout 目录下新建一个 Layout resour ...

  6. Spark MLlib FPGrowth关联规则算法

    一.简介 FPGrowth算法是关联分析算法,它采取如下分治策略:将提供频繁项集的数据库压缩到一棵频繁模式树(FP-tree),但仍保留项集关联信息.在算法中使用了一种称为频繁模式树(Frequent ...

  7. kali权限提升之配置不当提权与WCE

    kali权限提升之配置不当提权与WCE 1.利用配置不当提权 2.WCE 3.其他提权 一.利用配置不当提权 与漏洞提权相比更常用的方法 在大部分企业环境下,会有相应的补丁更新策略,因此难以通过相应漏 ...

  8. CQOI2019(十二省联考)游记

    CQOI2019(十二省联考)游记 Day -? 自从联赛爆炸,\(THUWC\)爆炸,\(WC\)爆炸(就没有不爆炸的)之后我已经无所畏惧... 听说是考\(4.5 h\)吗? Day -1 \(Z ...

  9. Clion快捷键

    快捷键配置 File->Setting->Keymap->Keymaps 选择Visual Studio风格 代码提示的匹配模式 File->Setting->Edito ...

  10. java中的超类是什么

    超类(SuperClass) :用java术语来讲,被继承的类称为超类(SuperClass),也有叫做父类,继承的类称为子类.