React中jsx调用js例子
需求:
界面新增一个“导入项目”按钮,点击该按钮可以执行项目导入功能。按钮点击事件部分是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例子的更多相关文章
- React中JSX的理解
React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ...children)的语法糖,同时JSX也是J ...
- 在Java中直接调用js代码(转载)
http://blog.csdn.net/xzyxuanyuan/article/details/8062887 JDK1.6版添加了新的ScriptEngine类,允许用户直接执行js代码. 在Ja ...
- 在Java中直接调用js代码
JDK1.6版添加了新的ScriptEngine类,允许用户直接执行js代码. 在Java中直接调用js代码 不能调用浏览器中定义的js函数,会抛出异常提示ReferenceError: “alert ...
- 在react中使用intro.js的的一些经验
react逐渐热了起来,但是新的东西毕竟前辈的经验少一些,前段时间自己在react中用到intro.js时,得到的资料甚少,摸索后便将一些心得记录下来了~ 1 intro.js的引入,这一点请看上一篇 ...
- android 中webview调用js
1.android中利用webview调用网页上的js代码. Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true ...
- react中直接调用子组件的方法(非props方式)
我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的. 显而易见,这个执行 ...
- [转]html里a标签中href调用js的几种方法
文章转自:https://blog.csdn.net/best_luxi/article/details/45062301 我们常用的在a标签中有点击事件: 1. a href=”javascript ...
- 【React】在React中 JSX 代码如何转成 JS 代码?
一.介绍 写 React 代码的朋友应该都是直接写 JSX 代码,JSX 让我们可以在 JS 中直接写 HTML 代码,可阅读性较高.本章节主要介绍 JSX 通过 babel 转换后会生成什么样式代码 ...
- react中jsx文件是如何转换成js对象的
通过在线babel转换器,转换出jsx是如何变成js对象的 jsx文件 加入了正常的标签以及嵌套标签以及方法属性 function hello() { click=()=>{ console.l ...
随机推荐
- 详解MySQL表空间以及ibdata1文件过大问题
ibdata1文件过大 原因分析 ibdata1是一个用来构建innodb系统表空间的文件,关于系统表空间详细介绍参考MySQL官网文档 上面是一个数据库的ibdata1文件,达到了780多G,而且还 ...
- sql server 生成数据库字典 sql语句
SELECT TOP 100 PERCENT --a.id, CASE WHEN a.colorder = 1 THEN d.name ELSE '' END AS 表名, ...
- DevOps实例
DevOps实例 ------------------------------------------------------------------ 今天先到这儿,希望对您DevOPS, 技术领导力 ...
- Java 初始化a=2 打印a+++a++为5
这段程序大概这样: public static void main(String[] args){ int a = 2; System.out.println(a+++a++); } 编译后的字节码为 ...
- Servlet--创建和配置Servlet
在web开发中,一般由Servlet进行数据流的控制,并通过HttpServletResponse对象对请求做出响应.创建的Servlet必须继承HttpServlet类,并实现doGet()和doP ...
- 禁用事件event默认行为
在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页. js中return false作用一般是 ...
- FreeNas搭建踩坑指南(三)
0x00 Dell R730 无法编辑阵列卡Raid FreeNas和Windows Server都做成了uefi启动,装之前删掉了数据盘配置,系统装好后重启发现无法进入阵列卡编辑 0x01 解决方案 ...
- 基于python的种子搜索网站,你懂得!
该项目是基于python的web类库django开发的一套web网站,给师弟做的毕业设计.本人的研究方向是一项关于搜索的研究项目.在该项目中,笔者开发了一个简单版的搜索网站,实现了对数据库数据的检索和 ...
- 高通方案的Android设备几种开机模式的进入与退出
高通方案的Android设备主要有以下几种开机模式,Android.EDL.Fastboot.Recovery和FFBM,其进入及退出的方式如下表. 开机模式 屏幕显示 冷启动 热启动 按键退出 命令 ...
- 使用GDB调试Android Native 层代码
--------------步骤:0. adb root0. adb shell0. ps | grep browser1. gdbserver :5039 --attach pid2. adb fo ...