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.
随机推荐
- windows下关闭指定端口服务，解决tomcat端口占用问题
http://blog.aizhet.com/Server/640.html 在windows下做java EE的开发时:搭建 Eclipse+tomcat的java web开发环境:在应用之中经常遇 ...
- 【扬中集训Day6T1】 白日梦
[题目描述] 白日梦 (daydream.c/cpp/pas) 时间限制: 1 s 空间限制: 256 MB 题目描述 SR需要相当大的睡眠量 某日,他做了一个奇怪的梦,他梦见自己成为了怪物猎人,为 ...
- UI：地图和定位
参考学习链接 各种IOS设备可以使用 Core Location 框架确定它的物理位置.core location 主要使用三种技术来实现功能.GPS.蜂窝基站三角网络定位. wifi 定位服务.这三 ...
- Android笔记---常用控件以及用法
这篇文章主要记录下Android的常用控件以及使用的方法,Android 给我们提供了大量的UI控件,合理地使用这些控件就可以非常轻松地编写出相当不错的界面,这些是Android学习的基础,没有什么业 ...
- DFS系列 POJ(自认为的讲解)
C - Sum It Up POJ1564 题意: 给你一个N,然后给你一堆数The numbers in each list appear in nonincreasing order, and t ...
- hdoj1106
果然...这种一条字符串的处理,还是不熟练,居然wa了四次--. 预处理预处理!!!!: 然后中间对条件的确定,标记的改变+预处理,不够严谨啊!!! #include<cstdio> #i ...
- python __builtins__ type类 （69）
69.'type', 返回对象类型 class type(object) | type(object_or_name, bases, dict) | type(object) -> the ob ...
- 51单片机 HC05蓝牙模块
一.注意事项 1.烧写程序时,要把蓝牙tx,rx信号线拔掉,对烧写程序有影响. 2.执行HC05集命令时,均以\r\n结尾.串口中断若选择“发送新行”时,不用添加\r\n.原理相同. 二.准备软硬件 ...
- 浅谈Floyd的三种用法 By cellur925
Floyd大家可能第一时间想到的是他求多源最短路的n³算法.其实它还有另外两种算法的嘛qwq.写一发总结好了qwq. 一.多源最短路 放段代码跑,注意枚举顺序,用邻接矩阵存图.本质是一种动规. 复杂度 ...
- PHP 遍历一个文件夹下所有文件和子文件夹的方法
话不多说,直接上代码 <?php function my_dir($dir) { $files = []; if(@$handle = opendir($dir)) { while(($file ...