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 ...
随机推荐
- AJAX 状态值与状态码详解
1- AJAX状态值与状态码区别 AJAX状态值是指,运行AJAX所经历过的几种状态,无论访问是否成功都将响应的步骤,可以理解成为AJAX运行步骤.如:正在发送,正在响应等,由AJAX对象与服务器交互 ...
- HDU6130 签到题 打表
LINK 题意:给出一个描述自身的数列,求出第n项 思路:看了很久题目才看懂..每个值其实是描述一个分组中的个数,把两个数列对照一下就可以了,那么一个指针扫,同时向尾部加数,构造个数组就行了.其实很水 ...
- 760A 水
LINK 第一天单独一行 其余7天一行 问某月有多少行 ...... /** @Date : 2017-04-02-21.35 * @Author : Lweleth (SoungEarlf@gmai ...
- Date、String、Calendar相互转化
Date是在Jdk1.0出现的专门用来处理时间的类,但是由于Date在国际化方面存在限制,在Jdk1.1推出Calendar,现在Date的很多方法都已经过时,都迁移到Calendar上. 1.Dat ...
- 始终要重载toString
本文涉及到的概念 1.重载toString方法的意义 2.两个注意事项 1.重载toString方法的意义 重载toString,返回关于当前实例的描述信息.这在调试错误,打印实例信息时,可以带来 ...
- mac终端配色
1. 终端输入 ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)" 2. brew installxz ...
- 数据库管理软件 Navicat Premium12 破解步骤
数据库管理软件 Navicat Premium12B https://pan.baidu.com/s/1QnAQwW-q0SQ1JglpFGxKOA 密码 : mwqc 里面的软件和补丁是 ...
- python自动开发之（算法）第二十七天
1.什么是算法? 算法(Algorithm):一个计算过程,解决问题的方法 2.复习:递归 递归的两个特点:(1) 调用自身 (2)结束条件 def func1(x): print(x) func1( ...
- Postgres中tuple的组装与插入
1.相关的数据类型 我们先看相关的数据类型: HeapTupleData(src/include/access/htup.h) typedef struct HeapTupleData { uint3 ...
- Linux内核多线程实现方法 —— kthread_create函数【转】
转自:http://blog.csdn.net/sharecode/article/details/40076951 Linux内核多线程实现方法 —— kthread_create函数 内核经常需要 ...