需求:

界面新增一个“导入项目”按钮,点击该按钮可以执行项目导入功能。按钮点击事件部分是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. docker(3)容器管理命令

    接着上一篇,今天说一下Docker 有关容器的常用命令.算是比较详细了吧. docker run  命令: 注:此命令作用是使用一个镜像运行启动一个容器. 在启动运行的时候 会检查docker 中是否 ...

  2. 菜鸟先飞C#学习总结(一)

    一.第一个程序Hellow Word using System; //using 关键字用于在程序中包含 System 命名空间. 一个程序一般有多个 using 语句. using System.C ...

  3. Java 插入附件到PDF文档

    在文档中插入附件,可以起到与源文档配套使用的目的,以一种更简便的方式对文档起到补充说明的作用.下面将介绍通过Java编程插入附件到PDF文档中的方法.这里插入的文档可以是常见的文档类型,如Word.E ...

  4. Java 数组及数组常用算法

    1 数组也是一种类型 Java中要求所有的数组元素具有相同的数据类型.因此在一个数组中,数组元素的类型是唯一的,不能存储多种类型的数据. 一旦数组的初始化完成,数组在内存中所占的空间将被固定下来,因此 ...

  5. 结合JDK源码看设计模式——策略模式

    前言: 现在电商已经成为我们生活中不可或缺的购物渠道,同时各大商家会针对不同的时间做出不同的折扣,这在我们看来就是一种营销手段,也是一种策略,今天我们就来讲讲JDK中的策略模式是怎么样的. 一.定义 ...

  6. 通用查询类封装之Mongodb篇

    查询在应用程序中很重要,花样也特别多,不同得业务需求需要不同的查询条件,还要支持and.or ……事实上也确实如此,程序中有N多个查询类,并且很可能其中有多个类查询同一张表,所以特别想弄一个通用的查询 ...

  7. css选择器概述

    css选择器种类 id选择器 类选择器.属性选择器.伪类选择器 元素选择器.伪元素选择器 通配符选择器.子类选择器.后代选择器.相邻兄弟选择器.选择器分组 一.id选择器 <p id=" ...

  8. IntentService原理分析

    IntentService是一个异步处理请求的服务,通过Context#startService(Intent)可以将请求发送给IntentService,IntentService在工作线程中依次串 ...

  9. python使用rabbitMQ介绍五(话题模式)

    一.模式介绍 话题模式(Topic)基本思想和路由模式是一样的,只不过路由键支持模糊匹配,符号“#”匹配一个或多个词,符号“*”匹配不多不少一个词 话题模式相当于消息的模糊匹配,或者按照正则匹配.其中 ...

  10. libevent 实现的socket 通信 server以及解决找不到动态库的方法

    注: client 个人觉得没必要用 libvent来实现就没写 注:由于 涉及到回调函数的使用 如有疑惑的可以先去了解回调函数的实现机理 先来说一下 libevent主要是干啥的 : 内部封装了 s ...