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 ...
随机推荐
- 服务器linux centos 7.4 搭建ftp服务器
此操作是在腾讯云服务器linux centos 7.4 完成搭建ftp服务器 vsftpd 的: 安装 vsftpd $ yum install vsftpd -y 启动 $ service vsft ...
- SVN安装和使用(简单版)
为什么使用SVN? 通常软件的开发需要团队协作开发,每个人负责一个方面,都做完后需要把每个人的代码整合在一起,而每个人的代码方面不同或版本不同就会拖延开发进度对开发项目造成麻烦,如果一个人需要另一个人 ...
- Linux journalctl命令
在Systemd出现之前,Linux系统及各应用的日志都是分别管理的,Systemd开始统一管理了所有Unit的启动日志,这样带来的好处就是可以只用一个 journalctl命令,查看所有内核和应用的 ...
- 3.JavaScript-语法、关键保留字及变量
语法构成区分大小写标识符注释直接量字面量literal关键字保留字变量语法构成JavaScript 的语言核心 ECMAScript. 区分大小写ECMAScript 中的一切,包括变量.函数名和操作 ...
- MySQL逻辑架构概述
1.MySQL逻辑架构 MySQL逻辑架构图 MySQL逻辑架构分四层 1.连接层:主要完成一些类似连接处理,授权认证及相关的安全方案. 2.服务层:在 MySQL据库系统处理底层数据之前的所有工作都 ...
- js调用百度地图接口绘制任意多边形并获取每个点的经纬度等
来自:https://blog.csdn.net/u013239236/article/details/52213977 侵删 <!DOCTYPE html> <html> & ...
- 超简单的canvas绘制地图
本文使用geojson数据,通过缩放和平移把地图的地理坐标系转换canvas的屏幕坐标系,然后将转换后的数据绘制到canvas上. 首先要计算数据的最大最小值,遍历所有坐标点的最大最小 ...
- Windows Server 2016-Telnet 简介及安装
Telnet是基于请求注释(RFC)854的因特网标准程序和协议,该RFC规定了一种在网络上发送和接收未加密的ASCII字符(明文)的方法.Telnet包含两个功能模块:Telnet客户端和Telne ...
- VS Code常用快捷键大全
常用 General 按 Press 功能 Function Ctrl + Shift + P,F1 显示命令面板 Show Command Palette Ctrl + P 快速打开 Quick O ...
- Win32 Ime
Win32 Ime API: ImmGetContext: 获取指定窗口的当前的输入上下文,然后再尝试访问上下文中的信息.应用程序应该定期使用这个功能获取窗口的当前的输入上下文.若hWnd参数为零,将 ...