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 ...
随机推荐
- 【小程序】小程序开发自定义组件的步骤>>>>>>>>>小程序开发过程中报错:jsEnginScriptError
报错:jsEnginScriptError VM6342: jsEnginScriptError Component is not found in path "component/spac ...
- 通过IIS操作修改服务器文件没有权限的解决办法
问题描述:通过部署在IIS上的程序去操做文件(比如删除.旋转图片等)时,在本地执行没有问题,但是部署到服务器上提示“没有权限”.解决方法:找到你需要操作的文件的根文件夹,右键点击属性 选择“安全”选项 ...
- 【技能意志矩阵-skill will matrix】工作中究竟是个人能力更重要,还是我们的积极性更能提高我们的业绩?
工作中究竟是个人能力更重要,还是我们的积极性更能提高我们的业绩? 我们可以通过建立“个人能力(即技能)”和“积极性(即意志)”的矩阵(skill will matrix),找到自己的象限,并根据指导意 ...
- SpringBoot2.0小程序支付功能实现weixin-java-pay
SpringBoot2.0小程序支付功能实现weixin-java-pay WxJava - 微信开发 Java SDK(开发工具包); 支持包括微信支付.开放平台.公众号.企业微信/企业号.小程序等 ...
- [Java] Windows/Linux路径不同时,统一war的最简办法
作者: zyl910 一.缘由 在项目开发时,因为运行环境的不同,导致有时得分别为不同的环境,切换配置参数打不同war包.但手工切换配置文件的话,不仅费时费力,而且容易出错. 有些打包工具支持配置切换 ...
- 【PHP】解析PHP中的数组
目录结构: contents structure [-] 创建数组 删除数组 栈结构 常用的数组处理函数 在这篇文章中,笔者将会介绍PHP中数组的使用,以及一些注意事项.之前笔者已经说过PHP是一门弱 ...
- Canny 边缘检测及相关应用
该内容为 <学习图像局部特征检测和描述-基于OpenCV源码分析的算法与实现> <OpenCV 3 计算机视觉-Python语言实现> OpenCV官方网站的 https:// ...
- service_names配置不正确,导致dg创建失败
service_names配置不正确,导致dg创建失败 伙伴发来消息,创建dg后,主备一直无法进行日志同步. 以下是查看过程 备库的alert日志: 2018-11-13T17:47:36.23129 ...
- 【原创 Hadoop&Spark 动手实践 13】Spark综合案例:简易电影推荐系统
[原创 Hadoop&Spark 动手实践 13]Spark综合案例:简易电影推荐系统
- curl模拟访问已经存在的cookie
curl 'http://i.meituan.com/brunch/order?status=2' -H 'Pragma: no-cache' -H 'Accept-Encoding: gzip, d ...