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. .Net转Java.04.踩到switch的坑

    今天线上有个NullPointerException 的异常,我翻了一下代码,抛异常的竟然是switch语句 我有种不祥的预感,本地做了实验 结果是 Java的switch如果传入null值,会抛出  ...

  2. mac下host配置 + mac修改了环境变量却不生效:zsh: command not found: xxx

    https://blog.csdn.net/hlllmr1314/article/details/52228672 在/etc/profile中配置了go语言环境变量: export GOROOT=/ ...

  3. zookeeper 实现分布式锁安全用法

    zookeeper 实现分布式锁安全用法 标签: zookeeper sessionExpire connectionLoss 分布式锁 背景 ConnectionLoss 链接丢失 SessionE ...

  4. C# 之 批量插入数据到 SQLServer 中

    创建一个用来测试的数据库和表,为了让插入数据更快,表中主键采用的是GUID,表中没有创建任何索引.GUID必然是比自增长要快.而如果存在索引的情况下,每次插入记录都会进行索引重建,这是非常耗性能的.如 ...

  5. iOS/MAC 数据压缩与解压缩及常用算法 LZMA、ZLIB

    苹果提供的常用的数据压缩算法LZMA.ZLIB.LZ4等: 这三种算法也是苹果建议的,可跨平台使用: 定义如下: /* Commonly-available encoders */ COMPRESSI ...

  6. Down Payment 和 Deposit的差异

    If you’re like most homeowners, purchasing a home represents the single biggest financial transactio ...

  7. npm 发布包和删除包(2019最新攻略)

  8. 【20180111】【物流FM专访】贝业新兄弟李济宏:我们是如何做到大件家居B2C物流第一的?

    在2017年的双11中,贝业新兄弟承接了日日顺家装和卫浴行业的仓储和配送,上海仓和武汉仓双十一期间及时出库率为100%,KPI位列第一:此外,贝业新兄弟还是科勒18年以来中国区唯一的物流服务商以及宜家 ...

  9. Atitit 酷奇的押金危机 遇到资金链断裂作为创始人应该怎么办

    Atitit 酷奇的押金危机  遇到资金链断裂作为创始人应该怎么办 遇到对方确实经营不善,资产已经还不了用户的押金怎么办?? 1. 一些重要原则 1 1.1. 二次分配原则  公平原则 1 1.2. ...

  10. Linux: Linux C 获取当前系统时间的时间戳(精确到秒、毫秒、微秒) gettimeofday

    说明 获取当前的时间的秒数和微秒数本方法需要用到 gettimeofday() 函数,该函数需要引入的头文件是  <sys/time.h>  . 函数说明 int gettimeofday ...