react 简单的用函数调出ui显示
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显示的更多相关文章
- client高性能组件化框架React简单介绍、特点、环境搭建及经常使用语法
[本文源址:http://blog.csdn.net/q1056843325/article/details/54729657 转载请加入该地址] 明天就是除夕了 预祝大家新春快乐 [ ]~( ̄▽ ̄) ...
- React.js高阶函数的定义与使用
/* 高阶函数的简单定义与使用 一: 先定义一个普通组件 二: 用function higherOrder(WrappendComponent) { return } 将组件包裹起来,并用export ...
- React简单教程-6-单元测试
前言 我想大部分人的前端测试,都是运行项目,直接在浏览器上操作,看看功能正不正常.虽然明明有测试库可以使用,但是因为"要快"的原因,让好好做测试变成了一件影响效率的事. 因为这种无 ...
- React 简单介绍
React 简单介绍 作者 RK_CODER 关注 2014.12.10 17:37* 字数 2516 阅读 55715评论 6喜欢 70 why React? React是Facebook开发的一款 ...
- React简单教程-4.1-hook
前言 虽然我们简单感受了一下 useState 的用法,但我想你还是对 React 里的 hook 迷迷糊糊的.本文我们将明确下 React 的概念. HOOK 前生今世 在我示例中,写的 React ...
- React简单教程-4-事件和hook
前言 在上一章 React 简单教程-3-样式 中我们建立了一个子组件,并稍微美化了一下.在另一篇文章 React 简单教程-3.1-样式之使用 tailwindcss 章我们使用了 tailwind ...
- React简单教程-2-ts和组件参数
前言 在上一章:React 简单教程-1-组件 我们知道了 React 的组件是什么,长什么样,用 js 和 HTML 小小体验了一下组件.在这一章,我们将使用 typescript(简称 ts) 来 ...
- 带有“非简单参数”的函数为什么不能包含 "use strict" 指令
非简单参数就是 ES6 里新加的参数语法,包括:1.默认参数值.2.剩余参数.3.参数解构.本文接下来要讲的就是 ES7 为什么禁止在使用了非简单参数的函数里使用 "use strict&q ...
- Activity调用静态方法改变UI,使用Handler来改变UI显示
本人菜鸟,请各位多多指点,不足之处,请斧正.没啥技术含量,就权当丰富下mono for android的小代码. Activity调用静态方法改变UI using System; using Andr ...
随机推荐
- 基于SOUI开发一个简单的小工具
基于DriectUI有很多库,比如 Duilib (免费) soui (免费) DuiVision (免费) 炫彩 (界面库免费,UI设计器付费,不提供源码) skinui (免费使用,但不开放源码, ...
- 超详细动手搭建一个Vuepress站点及开启PWA与自动部署
超详细动手搭建一个Vuepress站点及开启PWA与自动部署 五一之前就想写一篇关于Vuepress的文章,结果朋友结婚就不了了之了. 记得最后一定要看注意事项! Vuepress介绍 官网:http ...
- Android Studio3.1.2升级问题:Configuration 'compile' is obsolete and has been replaced with 'implementation'.
每次升级Android Studio时,一般情况下Gradle版本的也会相应的升级,我之前Android Studio 3.0.1.Gradle 是4.1升级后为:Android Studio 3.1 ...
- 阿里云物联网平台体验(NetGadgeteer+C#篇)
目前对接阿里云物联网平台有多种软件和硬件,可以有多种不同语言来实现对接,比如c/c++,Java,JS,Python,C#等等,不过C#版本只有PC对接云平台的代码,嵌入式的目前还没有看到,所以本篇文 ...
- php urlencode vs java URLEncoder.encode
结论:urlencode 先比URLEncoder.encode多编码 “ * ” 符号,其他都保持一致 php urlencode phpversion()>=5.3 will compli ...
- 【MySQL】MySQL中查询出数据表中存在重复的值list
1.目的:查询MySQL数据表中,重复记录的值 2.示例: 3.代码: select serial_num,count(*) as count FROM card_ticket GROUP BY se ...
- H+ 关闭menuTab页面
//注:在contabs.js文件中 $(function () { }); 方法外 加入//注: data-name="' + menuName + '" 这句是加入的自定义属性 ...
- 使用Node.js的Express框架进行文件上传
我们先创建一个Express项目,要使用文件上传的功能还需要下载multer模块. npm install --save multer 下面我们在public文件夹下创建upload.html,内容如 ...
- 代码注释中的专有词——TODO、FIXME和XXX
[时间:2017-09] [状态:Open] [关键词:代码注释,TODO, FIXME, XXX] 阅读开源代码时可能经常遇到TODO.FIXME.XXX的单词,通常这些都是有其特殊含义的. 中文版 ...
- 【资料下载区】【iCore系列及其它模块相关文档】更新日期2017/07/24
iCore系列双核心板原理图下载区 iCore双核心板原理图下载(注释版)iCore1s双核心板原理图下载iCore2双核心板原理图下载iCore3双核心板原理图下载iCore4双核心板原理图下载 i ...