import test from '../components/test'

const info = () => {
test.info('This is a normal message');
}; render(){
retrun <button onClick={info}>click me</button>
}

test.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Dialog, DialogTitle } from "@material-ui/core"; const Alert = (props) => (
<Dialog open={true} fullWidth>
<DialogTitle>{props.msg}</DialogTitle>
</Dialog>
); class Test extends Component {
static info(msg) {
const div = document.createElement("div");
document.body.append(div);
ReactDOM.render(<Alert msg={msg}/>, div);
}
}
export default Test;

react 简单的用函数调出ui显示的更多相关文章

  1. client高性能组件化框架React简单介绍、特点、环境搭建及经常使用语法

    [本文源址:http://blog.csdn.net/q1056843325/article/details/54729657 转载请加入该地址] 明天就是除夕了 预祝大家新春快乐 [ ]~( ̄▽ ̄) ...

  2. React.js高阶函数的定义与使用

    /* 高阶函数的简单定义与使用 一: 先定义一个普通组件 二: 用function higherOrder(WrappendComponent) { return } 将组件包裹起来,并用export ...

  3. React简单教程-6-单元测试

    前言 我想大部分人的前端测试,都是运行项目,直接在浏览器上操作,看看功能正不正常.虽然明明有测试库可以使用,但是因为"要快"的原因,让好好做测试变成了一件影响效率的事. 因为这种无 ...

  4. React 简单介绍

    React 简单介绍 作者 RK_CODER 关注 2014.12.10 17:37* 字数 2516 阅读 55715评论 6喜欢 70 why React? React是Facebook开发的一款 ...

  5. React简单教程-4.1-hook

    前言 虽然我们简单感受了一下 useState 的用法,但我想你还是对 React 里的 hook 迷迷糊糊的.本文我们将明确下 React 的概念. HOOK 前生今世 在我示例中,写的 React ...

  6. React简单教程-4-事件和hook

    前言 在上一章 React 简单教程-3-样式 中我们建立了一个子组件,并稍微美化了一下.在另一篇文章 React 简单教程-3.1-样式之使用 tailwindcss 章我们使用了 tailwind ...

  7. React简单教程-2-ts和组件参数

    前言 在上一章:React 简单教程-1-组件 我们知道了 React 的组件是什么,长什么样,用 js 和 HTML 小小体验了一下组件.在这一章,我们将使用 typescript(简称 ts) 来 ...

  8. 带有“非简单参数”的函数为什么不能包含 "use strict" 指令

    非简单参数就是 ES6 里新加的参数语法,包括:1.默认参数值.2.剩余参数.3.参数解构.本文接下来要讲的就是 ES7 为什么禁止在使用了非简单参数的函数里使用 "use strict&q ...

  9. Activity调用静态方法改变UI,使用Handler来改变UI显示

    本人菜鸟,请各位多多指点,不足之处,请斧正.没啥技术含量,就权当丰富下mono for android的小代码. Activity调用静态方法改变UI using System; using Andr ...

随机推荐

  1. Python3 与 NetCore 基础语法对比(Function专栏)

    Jupyter最新排版:https://www.cnblogs.com/dotnetcrazy/p/9175950.html 昨晚开始写大纲做demo,今天牺牲中午休息时间码文一篇,希望大家点点赞 O ...

  2. MySQL优化之like关键字

    1.%号不放最左边 无法使用索引了,开头是不确定的,MySQL也无法进行优化了,只能扫描表了. 2.使用覆盖索引 如果业务需要%就放开头我们也没办法,一般情况需求都是这样的,毕竟优化还是为业务服务的. ...

  3. centOS --- 安装最新版的node nodejs

    对于 RHEL, CentOS or Fedora 系统,Node.js v8 LTS版本命令: curl –silent –location https://rpm.nodesource.com/s ...

  4. 每位 Ubuntu 18.04 用户都应该知道的快捷键 | Linux 中国

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/F8qG7f9YD02Pe/article/details/82879369 wx_fmt=jpeg& ...

  5. Catch a Memory Access Violation in C++

    From:  https://stackoverflow.com/questions/16612444/catch-a-memory-access-violation-in-c In C++, is ...

  6. DENIED Redis is running in protected mode

    1.开源软件往往做的非常出色,错误的时候,会告诉你原因,以及怎么修改,仔细阅读就能明白.比如这个错误: [root@localhost src]# ./redis-cli -h 172.16.2.16 ...

  7. Python禁用GC优化性能

    Python使用的(Garbage Collection, GC)机制是引用计数(Reference Count),其原理是为每一个内存对象进行引用计数,因此当有大量的对象新建或删除时,必须要进行大量 ...

  8. 运维笔记10 (Linux软件的安装与管理(rpm,yum))

    概述:用rpm安装和管理软件(rpm解决依赖性),用yum安装与管理软件(yum解决依赖性). 1.linux的软件 linux能够说是一款改变时代的操作系统,可是一个操作系统再优秀假设没有好用的应用 ...

  9. 单片机 MCU 中 stack 使用的探讨

    stack 的使用,是单片机开发中影响最大,但是最少被讨论的问题.而提及这个问题的地方,都是对这个问题含糊其辞. 今天花了点时间,使用最笨的办法,直接阅读汇编代码,来对这个问题就行探究,这里做一下记录 ...

  10. 阿里云提示WordPress“/wp-includes/http.php输入IP验证不当”的解决办法

    本文转自:https://www.liuzhishi.com/2931.html 标题: wordpress IP验证不当漏洞 简介: wordpress /wp-includes/http.php文 ...