react篇章-React 组件-复合组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body> <div id="example"></div>
<script type="text/babel">
function Name(props) {
return <h1>网站名称：{props.name}</h1>;
}
function Url(props) {
return <h1>网站地址：{props.url}</h1>;
}
function Nickname(props) {
return <h1>网站小名：{props.nickname}</h1>;
} function NameBlog(props) {
return <h1>博客名称：{props.name}</h1>;
}
function UrlBlog(props) {
return <h2>博客地址：{props.url}</h2>;
}
function NicknameBlog(props) {
return <h3>博客小名：{props.nickname}</h3>;
}
function App() {
return (
<div>
<Name name="菜鸟教程" />
<Url url="http://www.runoob.com" />
<Nickname nickname="Runoob" />
</div>
);
}
function AppBlog() {
return (
<div>
<NameBlog name="zzzzw的博客" />
<UrlBlog url="https://www.cnblogs.com/zzzzw" />
<NicknameBlog nickname="zzzzw" />
</div>
);
} ReactDOM.render(
<AppBlog />,
document.getElementById('example')
);
</script> </body>
</html>
react篇章-React 组件-复合组件的更多相关文章
- react篇章-React Props
state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.这就是为什么有些容器组件需要定义 state 来更新和修改数据. 而子组件只能通过 pro ...
- react篇章-React State(状态)-组件都是真正隔离的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React 组件-向组件传递参数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React 组件-ES6 class 来定义一个组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- React篇章-React 组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React Props-Props 验证
React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库. <script src="https://cdn.bootcss.com/pr ...
- react篇章-React State(状态)-数据自顶向下流动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React State(状态)-将生命周期方法添加到类中
将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要. 每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载. ...
- react篇章-React State(状态)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
随机推荐
- [洛谷P2750] [USACO5.5]贰五语言Two Five
洛谷题目链接:[USACO5.5]贰五语言Two Five 题目描述 有一种奇怪的语言叫做"贰五语言".它的每个单词都由A-Y这25个字母各一个组成.但是,并不是任何一种排列都是一 ...
- Spring REST 异常处理
在上一篇中写到了Spring MVC的异常处理,SpringMVC捕获到异常之后会转到相应的错误页面,但是我们REST API ,一般只返回结果和状态码,比如发生异常,只向客户端返回一个500的状态码 ...
- Flex用HTTPService调用servlet返回中文乱码解决
servlet中使用URLEncoder.encode对输出内容进行编码 Flex中使用decodeURIComponent进行解码
- 【BZOJ】1741: [Usaco2005 nov]Asteroids 穿越小行星群
[题意]给定n*n网格,有k个物品,每次可以消灭一行或一列,求消灭掉所有物品的最少操作次数. [算法]二分图最小覆盖 [题解]此题是最小覆盖模型的出处. 将物品的x-y连边建立二分图. 最小覆盖:选择 ...
- 【HDU】6110 路径交(2017百度之星) 线段树+RMQ-LCA+树链的交
[题目]2017"百度之星"程序设计大赛 - 初赛(A) [题意]给定n个点的带边权树,m条编号1~m的路径,Q次询问编号区间[L,R]所有链的交集的长度.n<=500000 ...
- 正则表达式：Python 模块 re 简介
为了使文章更具可读性,本文将正则表达式冗长的 语法介绍 放在了文章的末尾. 一.正则表达式简介 正则表达式(RegExp)是一种文本模式,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(元字符 ...
- Metasploit 使用基础
本文将简单介绍一下Kali2 上Metasploit的一些基本使用,包括启动.更新及一个小问题"Module database cache not built yet, using slow ...
- Tornado/Python 学习笔记（一）
1.源代码下载及安装:http://www.tornadoweb.org/en/stable/ 2.python中xmlrpc库官方文档:https://docs.python.org/3/libra ...
- Installation Guide for Appium 1.6.3
A.) System Requirements : - Require node 4 or above Xcode 8 iOS 10 B.) Open terminal and type follow ...
- AngularJs 文件上传（实现Multipart/form-data 文件的上传）
<!-- 上传yml文件 --> <div class="blackBoard" ng-show="vm.showUpop==true"> ...