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 ...
随机推荐
- python初步学习-python函数（一）
python 函数 函数是组织好的,可重复使用的,用来实现单一或者相关联功能的代码段. 函数能提高应用的模块性和代码的重复利用率. 函数定义 python中函数定义有一些简单的规则: 函数代码块以de ...
- lintcode 66.67.68 二叉树遍历（前序、中序、后序）
AC代码: /** * Definition of TreeNode: * public class TreeNode { * public int val; * public TreeNode le ...
- Verilog笔记.3.有限状态机
有限状态机有限状态机是由寄存器组和组合逻辑构成的硬件时序电路,其状态(即由寄存器组的1和0的组合状态所构成的有限个状态)只可能在同一时钟跳变沿的情况下才能从一个状态转向另一个状态,究竟转向哪一状态还是 ...
- perl6 struct2-045 EXP
测试站点: http://www.yutian.com.cn/index.action http://www.hjxzyzz.com:8088/pfw/login.action 代码如下: use v ...
- linux用户修改用户shell
要拒绝系统用户登录,可以将其shell设置为/usr/sbin/nologin或者/bin/false # usermod -s /usr/sbin/nologin username 或者 # use ...
- socket.io插件调用的demo
1.利用socket.io插件制作一个聊天框,原理是输入对话,发送到服务,服务器在返回相应的对话,最后插入页面中,时间对话的功能,这里我是使用的node.js搭建的服务器. 附上源码 <!DOC ...
- 使用ExtJS做一个用户的增删改查
extjs版本为4.2,用户数据放在静态list中存储 User.java package com.ext.demo.dao; public class User { private int id; ...
- PTP简介
PTP简介 在通信网络中,许多业务的正常运行都要求网络时钟同步,即整个网络各设备之间的时间或频率差保持在合理的误差水平内.网络时钟同步包括以下两个概念: l 时间同步:也叫相 ...
- 动手编写TCP服务器系列之一：日志文件
前言 在几个月之前,笔者想自己实现一个性能比较良好的基于tcp的服务器.于是断断续续写了个把月,因为还需要找工,还有论文什么的.拖了这么久.现在开辟这样的一个博客,我想记录下自己的思路,也和大家分享自 ...
- CSU 1416 Practical Number
原题链接:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1416 结论题,具体判断方法请点击这个网址. 筛素数是肯定的,但一开始定的范围太大了,想当 ...