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 ...
随机推荐
- 重构改善既有代码设计--重构手法11：Move Field （搬移字段）
你的程序中,某个字段被其所驻类之外的另一个类更多的用到.在目标类建立一个新字段,修改源字段的所有用户,令它们改用新字段. 动机:在类之间移动状态和行为,是重构过程中必不可少的措施.随着系 ...
- （64位）本体学习程序（ontoEnrich）系统配置说明文档
1系统环境 64位 Ubuntu 2 第三方依赖库配置 boost_1_44_0 #解压boost_1_44_0.tar.gz 到 /usr/local.如果出现权限问题,请用sudo执行该命令 ta ...
- [linux]linux下安装mysql
1.安装g++$sudo apt-get install build-essential注:此命令会同时安装gcc和make2.安装cmake$sudo apt-get install cmake3. ...
- 【Hadoop】用web查看hadoop运行状态
博文已转移,请借一步说话.http://www.daniubiji.cn/archives/621 上一篇文章(去博客园),我们安装完hadoop,下面我们从视觉上看看hadoop怎么玩的. 我们可以 ...
- 【CodeForces】932 E. Team Work
[题目]E. Team Work [题意]给定n和k,n个人中选择一个大小为x非空子集的代价是x^k,求所有非空子集的代价和%1e9+7.n<=10^9,k<=5000. [算法]斯特林反 ...
- 【leetcode 简单】第五十题 位1的个数
编写一个函数,输入是一个无符号整数,返回其二进制表达式中数字位数为 ‘1’ 的个数(也被称为汉明重量). 示例 : 输入: 11 输出: 3 解释: 整数 11 的二进制表示为 00000000000 ...
- Win7下SQLPlus登录时报错"SP2-1503:无法初始化Oracle调用界面"
Oracle安装完毕,使用SQLPlus登录的时候报错"SP2-1503:无法初始化Oracle调用界面",然后一闪界面关闭,报错界面如下: 这个是因为在Win7需要管理员权限,右 ...
- KEA128单片机启动代码分析
;/*****************************************************************************; * @file: startup_SK ...
- Function.prototype.bind 简介
bind可以解决两种问题: 1. 可以改变一个函数的 this 指向 2. 可以实现偏函数等高阶功能 本文暂且讨论第一个功能 USE CASE var foo = { x: 3 } var bar = ...
- 五. Jmeter--HTTP Cookie Manager
1. 添加HTTP Cookie Manager 2.添加登录login http,request info 和 HTTP Header Manager 中的信息是从fiddler中拿的, 至于hea ...