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 ...
随机推荐
- DS标签控件文本解析格式
DS标签控件使用DSL文本渲染引擎,支持DSL引擎代码.目前支持代码如下: <b>粗体</b> 以粗体显示 <i>斜体</i> 以斜体显示 <u& ...
- 用.net写Textbox控件关于数字的判断的二则方法
方法一.使用textboxSelected事件进行判断首界面源码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- 分享几个常见的CMD命令,可能会用的上
win7快捷命令.CMD命令secpol.msc(设置开机启动提示信息)services.msc(打开服务)dxdiag(检查DirectX信息)winver(检查Windows版本)regedit( ...
- js正则表达式替换HTML标签以及空格( )
参考:范仁义 js代码: function filter(text) { var reg = /<[^<>]+>/g;//1.全局匹配g肯定忘记写,2.<>标签中不 ...
- Swiper4.x使用方法
1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件.可下载Swiper文件或使用CDN. <!DOCTYPE html> <html> ...
- cesium 之三维漫游飞行效果实现篇(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
- java 线程方法 ---- wait()
class MyThread5 implements Runnable{ private int flag = 10; @Override public void run() { while (fla ...
- Android Studio Error:Execution failed for task ':app:preDebugAndroidTestBuild'.彻底解决的方法以及修改AScompileSDKVersion
Error Error:Execution failed for task ':app:preDebugAndroidTestBuild'. > Conflict with dependency ...
- SQL Server数据库文件与文件组总结
文件和文件组概念 关于文件与文件组,简单概括如下,详情请参考官方文档"数据库文件和文件组Database Files and Filegroups"或更多相关资料: 数据文件概念: ...
- 利用Navicat高效率postgresql转mysql数据库
本人很喜欢postgresql数据库,也一直认为postgresql比mysql要更好更强大. 可生态环境太差了,无奈,最近要把一个小站转成mysql数据库. 小站主要表数据110万,pg_dump备 ...