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 ...
随机推荐
- RabbitMQ的原理和使用
转载:RabbitMQ从入门到精通 转载:轻松搞定RabbitMQ 转载:RabbitMQ Java入门教程 一.RabbitMQ AMQP,即Advanced Message Queuing Pro ...
- DHTML中window的使用
window对象是对浏览器窗口进行操作的对象.以下列出一些常用的对象(三级为对象的方法.属性) |-navigator:是对浏览器信息进行操作的对象 |-history:包含用户浏览过的url信息 | ...
- 【bzoj】2326 [HNOI2011]数学作业
[题意]给定n和m,求1~n从高位到低位连接%m的结果.n=11时,ans=1234567891011%m.n<=10^18,m<=10^9. [算法]递推+矩阵快速幂 [题解] 考虑枚举 ...
- 搭建cdh单机版版本的hive所遇到的问题总汇
今天按照网上教程搭建了下 cdh 单机版的 hive 将相关配置记录下来 以便以后方便翻阅 版本 hive-0.13.1-cdh5.3.6.tar.gz 1. 直接解压 然后将 mysql驱动包 拷 ...
- php常用函数——字符串函数
php常用函数——字符串函数
- Python标准库笔记(5) — sched模块
事件调度 sched模块内容很简单,只定义了一个类.它用来最为一个通用的事件调度模块. class sched.scheduler(timefunc, delayfunc)这个类定义了调度事件的通用接 ...
- Deploy Openstack with RDO and Change VNC console to Spice
Deploy Openstack with RDO and Change VNC console to Spice host os: centOS 7 server config network an ...
- cocos2d-x android 添加新场景报错: undefined reference to `vtable for XXX'
转载自 居家懒人 http://www.cnblogs.com/JD85/archive/2012/09/17/2688128.html 加入写了新场景SecondScene,结果在cpp文件里类名地 ...
- selenium grid结构图
调用 Selenium-Grid 的基本结构图如下: 上面是使用 selenium-grid 的一种普通方式,仅仅使用了其支持的分布式执行的功能,即当你同时需 要测试用例比较多时,可以平行的执行这些用 ...
- PHP 利用nginx的X-sendfile控制下载，提高下载效率
https://blog.csdn.net/qq_34839657/article/details/52812885 https://www.jianshu.com/p/bf5c387830b7 为了 ...