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 ...
随机推荐
- jitwatch查看JIT后的汇编码
1.下载Apache Maven 3.5.3 http://maven.apache.org/download.cgi apache-maven-3.5.3-bin.zip 解压为C:\maven3 ...
- .Net转Java.02.数据类型
.NET中常见的数据类型分类分别是值类型和引用类型 值类型包括(基元类型.struct.枚举) 引用类型包括(类.类.数组.接口.指针) Java分为,基本类型和类 C# Java 值类型 ...
- ArcGIS鼠标滚轮方向之代码篇
Desktop10.X有多个版本,不同版本的注册表路径不一致,注册表中可能残留多个版本的注册信息:也可能没有Desktop,而是Engine.其实可以通过RuntimeManager.ActiveRu ...
- 通过Comparable来实现对自身的比较
import org.apache.commons.lang.builder.CompareToBuilder; import org.apache.commons.lang.builder.Equa ...
- [Chrome插件] SelectJd(京东自营筛选器) v1.0.0 发布
如今京东的商品列表已经没有"自营"筛选了,只有"京东物流"筛选.导致找商品时不方便. 于是我开发了一下Chrome插件--SelectJd(京东自营筛选器). ...
- 无法解析依赖项。“Microsoft.Net.Http 2.2.29”与 'Microsoft.Net.Http.zh-Hans
无法解析依赖项.“Microsoft.Net.Http 2.2.29”与 'Microsoft.Net.Http.zh-Hans 2.0.20710 约束: Microsoft.Net.Http (= ...
- MATLAB 画柱状图(/直方图)修改横坐标名称并使其横着显示
使用MATLAB 画柱状图 ,即bar (x,y),其横坐标是默认 1.2.3.4.……的 % --v1 y1=[asum1,asum2,asum3,asum4,asum5,asum6,asum7,a ...
- 20151224今天发现到的两篇关于CSS架构、可复用可维护CSS和CSS学习提升能有改变思想观念意识的文章 分别是CSS架构目标和说说CSS学习中的瓶颈
多讲一个,CSS全称是什么?CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表又被我们称为CSS样式,CSS样式又被作为一种能制作出各种样式网页的技术 ...
- ElasticSearch 5.0及head插件安装
一.elasticsearch安装配置 1.官网下载源码包 https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5.0 ...
- MySQL遇到Deadlock found when trying to get lock,解决方案
最近遇到一个MYSQL update语句出现Deadlock found when trying to get lock的问题,分析一下原因. 什么情况下会出现Deadlock found when ...