需求:

界面新增一个“导入项目”按钮,点击该按钮可以执行项目导入功能。按钮点击事件部分是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. Spring Cloud Alibaba基础教程:Sentinel使用Nacos存储规则

    通过上一篇<使用Sentinel实现接口限流>的介绍,相信大家对Sentinel已经有了初步的认识.在Spring Cloud Alibaba的整合封装之下,接口限流这件事情可以非常轻易的 ...

  2. 基础知识:if判断、while循环、for循环

    今日学习内容                   1.if 判断(流程控制的一种) 写重复的代码是程序员最不耻的行为,所以我们需要while循环和for循环 ,^_^!                 ...

  3. Snowflake(雪花算法)的JavaScript实现

    现在好多的ID都是服务器端生成的,当然JS也可以生成GUID或者UUID之类的,但是如果想要有序……这时就想到了雪花算法,但是都知道JS中Number的最大值为Number.MAX_SAFE_INTE ...

  4. 浅谈Flutter(一):搭建Flutter开发环境

    学习内容来自: Flutter中文网  . Flutter实战 -------------------------------------------------------------------- ...

  5. Numpy库的学习(三)

    今天我们继续学习一下Numpy库的学习 废话不多说 ,开始讲 比如我们现在想创建一个0-14这样一个15位的数组 可以直接写,但是很麻烦,Numpy中就给我们了一个方便创建的方法 numpy中有一个a ...

  6. Spark MLlib FPGrowth关联规则算法

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

  7. SQL Server使用sys.master_files计算tempdb大小不正确

    一直习惯使用sys.master_files来统计数据库的大小以及使用情况,但是发现sys.master_files不能准确统计tempdb的数据库大小信息.如下所示: SELECT       da ...

  8. windows2012R2安装SQL2005详情!

    用友T3软件报错单据的时候提示1105数据库错误 原因分析:客户使用的是sql2005 express的数据库,账套的物理文件达到了4G. 只能重装SQL的版本,but.... 在window2012 ...

  9. 一:SqlServer中的 CEILING函数和 FLOOR函数以及ROUND()

    例如 1.ROUND() 格式为ROUND(y1,y2,y3) y1:要被四舍五入的数字y2:保留的小数位数 y3:为0,可以不写,y1进行四舍五入,不为0则y1不进入四舍五入,如果y1有值就直接根据 ...

  10. Java三大特性

    Java 三大特性,算是Java独特的表现,提到Java 的三大特性, 我们都会想到封装, 继承和多态 这是我们Java 最重要的特性. 封装(Encapsulation) : 封装:是指隐藏对象的属 ...