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 ...
随机推荐
- IBatisNet+Oracle.ManagedDataAccess打造无需安装oracle客户端和ODP即可连接oracle数据库
库环境: Oracle.ManagedDataAccess 版本:4.122.1.0 IBatisNet 版本:1.6.2 其实很简单的,只需在驱动配置那里添加上Oracle.ManagedData ...
- Spring Boot + Swagger
前言: 在互联网公司, 微服务的使用者一般分为两种, 客户端和其他后端项目(包括关联微服务),不管是那方对外提供文档 让别人理解接口 都是必不可少的.传统项目中一般使用wiki或者文档, 修改繁琐,调 ...
- DevExpress使用教程：GridView经验小结(官方中文文献经典资料技巧)
下面是笔者自己总结的使用 DevExpress Gridview 的一些经验小结,分享给大家: 1.去除 GridView 头上的 "Drag a column header here to ...
- JQuery的链式编程，隐式迭代是啥意思？
链式编程 1.好处 "一句话,链式编程可以省去很多重复的代码." 这话什么意思呢?举个例子. /*设置obj对象的两个属性*/ //普通做法是这样的 obj.name = '小明' ...
- Unity下实现弹簧骨骼（Spring Bone）
关于这个效果的名称,我一直没找到一个比较正式的说法.Spring Bone这个说法是来自于Anima2D这个插件中的一个演示用的脚本,我直接译成弹簧骨骼. 一般常见于对人物的头发的模拟上. 当然也可以 ...
- 如何实用便捷的在本地真机调试WEB端HTML5网页
先简单介绍两款常用但需要一定条件或限制的工具 1.如果你能FQ chrome在32版本后就自带了移动端调度工具,可以在Android直接联调,但唯一遗憾的是,在我大天朝要FQ后才能行的通,我自己试了后 ...
- perl6正则 6: 大小写/空白/匹配所有符合
这个 :g 只能写在外面 m:g /re/
- Python3 反射及常用的方法
反射就是通过字符串映射或修改程序运行时的状态.属性.方法 有四个常用方法: hasattr(obj,name_str) 判断一个obj对象是否有对应name_str的方法 getattr(obj,na ...
- centos如何设置定时任务
1.crontab -e 打开任务列表,输入i开始编写面之后按esc退出编写默写,:wq保存退出即可. 2.关于时间格式的定义,,请使用下面的网站 https://crontab.guru/#00_0 ...
- 函数参数 f_arg, *args, **kwargs
当需要给函数传参时,可以通过运用不同的形参来传递,达到参数不同的使用目的. 简单来说:f_arg就是传递的第一个参数,类似于C++中的普通参数: *args 传递的是一个参数的list: **kwar ...