react基础语法（三）组件的创建和复合组件
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head> <body>
<div id="app"> </div>
<script type="text/babel">
/*注意，原生 HTML元素名以小写字母开头，而自定义的 React类名以大写字母开头，
比如 HelloMessage不能写成 helloMessage;
除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错*/
//函数封装组件
function NewComponent(props) {
return <h1>函数封装的组件!</h1>;
}
//ES6创建组件
class Comfill extends React.Component {
render() {
return <h1>es6创建的组件!</h1>;
}
}
//向组件传递参数
function HelloMessage(props) {
return <h1>你好! {props.name}!</h1>;
}
//复合组件
function App() {
return (
<div>
<NewComponent/>
<Comfill/>
<HelloMessage name="react"/>
</div>
);
}
//const element3 = <HelloMessage name="react"/>; /*用户自定义的组件*/
ReactDOM.render(
<App />,
document.getElementById('app')
);
</script>
</body> </html>
react基础语法（三）组件的创建和复合组件的更多相关文章
- Python 基础语法(三)
Python 基础语法(三) --------------------------------------------接 Python 基础语法(二)------------------------- ...
- react基础语法（五） state和props区别和使用
props的验证: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- React基础语法学习
React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法 ...
- react 基础语法复习2- react入门以及JSX
引入 react 以及 ReactDom import React from 'react'; import ReactDOM from 'react-dom'; 将react组件渲染到真实dom节点 ...
- react基础篇三
事件处理 React事件绑定属性的命名采用驼峰式写法,而不是小写. 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法) 例如,传统的 HTML: < ...
- react 基础语法使用
刚开始不久react,在菜鸟上及其他前辈网站上学习,下面开始我的自学笔记. 包括: 渲染元素 组件(函数方法定义.es6 class定义) 事件处理 条件渲染 列表 下面代码部分将不会再写html部分 ...
- react基础语法二
这里只是对自己的学习进行一次总结,也是为了让自己以后如果长时间不使用快速记忆起来的笔记,如果想要学习,还是去官网看文档比较好一些.. 注意 下面的代码的 script标签的type类型都为 “text ...
- react基础学习 三
获取原生的DOM 注意:获取DOM是要在组件渲染之后才能被获取,所以在constructor里面获取不到原生的DOM 方法一:回调函数 推荐 方法二:createRef() 16版本,推荐 方 ...
- vue学习（4）-组件的创建，父子组件传值，$refs
模块化:代码逻辑 组件化:UI 组件的创建:1.
随机推荐
- Oracle备份与恢复：RMAN
今天第一次学习RMAN的使用.先登录系统: 数据库未启动,rman命令不能执行.在rman下 也可以 startup . 全库备份的命令:backup database 查看备份集. 下面模拟,数据 ...
- [Selenium] Automation Test Manual(Selenium)
http://www.cnblogs.com/puresoul/p/3483055.html http://www.360doc.com/content/14/0913/10/13497042_409 ...
- MongoDB之shard_副本集和分片部署
机器角色分配和拓扑环境如下: -------------------配置副本集s1-------------------------------1.创建目录在s1h1上创建如下目录[root@node ...
- memset函数学习
memset是计算机中C/C++语言函数.将s所指向的某一块内存中的后n个 字节的内容全部设置为ch指定的ASCII值, 第一个值为指定的内存地址,块的大小由第三个参数指定,这个函数通常为新申请的内存 ...
- A. Mishka and Game
time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...
- C++开发工程师面试题库 50~100道
51. New delete 与malloc free 的联系与区别?答案:都是在堆(heap)上进行动态的内存操作.用malloc函数需要指定内存分配的字节数并且不能初始化对象,new 会自动调用对 ...
- 魔法宝石（邻接表+dfs更新）
魔法宝石 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Submissi ...
- lightoj 1031【区间DP，未完待续】
题意: 给你一个n,再给你n个数,每个数<1e4; 有两个player交替取数字,每个人每一次能拿一个或多个,交替在两边拿. 游戏终止在所有的数字被取完. 两个人的分数就是所取得的数字大小总和. ...
- hdoj1078【DP·记忆化搜索】
还是满水的一道题目吧...这个一看肯定要搜索了..然后又是这么DP,那就是记忆化搜索了...走K步,下一步要比他多...很好写啊/// #include<iostream> #includ ...
- [官方教程] Unity 5 BLACKSMITH深度分享 - 汇总帖
BLACKSMITH深度分享系列 相信此大片在Unite上的惊艳亮相,让许多人至今无法忘却它所带来的震撼,Unity的大师们为了让更多Unity开发者了解此大片是如何用Unity5诞生的,深度分享了多 ...