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.
随机推荐
- Silverlight中使用MVVM(4)
Silverlight中使用MVVM(1)--基础 Silverlight中使用MVVM(2)—提高 Silverlight中使用MVVM(3)—进阶 Silverlight中使用MVVM(4)—演练 ...
- damon
不管是否有-f参数,最终程序都会进入 fuse_loop_mt 循环中,在helper.c的fuse_main_common函数中. 1. 有-f参数.这种情况下fuse_setup_common函数 ...
- 「LuoguP1122」 最大子树和
Description 小明对数学饱有兴趣,并且是个勤奋好学的学生,总是在课后留在教室向老师请教一些问题.一天他早晨骑车去上课,路上见到一个老伯正在修剪花花草草,顿时想到了一个有关修剪花卉的问题.于是 ...
- 利用PyCharm的Profile工具进行Python性能分析
Profile:PyCharm提供了性能分析工具Run->Profile,如下图所示.利用Profile工具可以对代码进行性能分析,找出瓶颈所在. 测试:下面以一段测试代码来说明如何使用pych ...
- 附加类型“UniversalReviewSystem.Models.ApplicationUser”的实体失败，因为相同类型的其他实体已具有相同的主键值。在使用 "Attach" 方法或者将实体的状态设置为 "Unchanged" 或 "Modified" 时如果图形中的任何实体具有冲突键值
在使用asp.net Identity2 的 UserManager RoleManager 时,同时还有其他仓储类型接口,能实现用户扩展信息的修改,用户注册没有问题.当修改用户信息时,出现了如下异常 ...
- mysql5.7 异常ERROR 1055 (42000)
大致错误如:ERROR 1055 (42000): Expression #1 of SELECT list is not in GROUP BY clause and contains nonagg ...
- ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 05.Controller 的路由
视频地址: https://www.bilibili.com/video/av38392956/?p=5 这里面就包含了MVC相关的库 可以通过打开右侧的Nuget库进行查看 这里修改下 ,只需要静态 ...
- H.264（MPEG-4 AVC）级别（Level）、DPB 与 MaxDpbMbs 详解（转载）
转自:http://www.cnblogs.com/zyl910/archive/2011/12/08/h264_level.html 对于H.264(MPEG-4 AVC)而言,级别(Level)是 ...
- C++笔试题（四）
华为从事通信网络技术与产品的研究.开发.生产与销售,是中国电信市场的主要供应商之一,并已成功进入全球电信市场.每年华为都要在各大高校招聘大批的应界生,特别是华中科技大学.公司网址是:http://ww ...
- android 在一个应用中启动另一个应用
在程序开发过程当中,常遇到需要启动另一个应用程序的情况,比如在点击软件的一个按钮可以打开地图软件. 如果既有包名又有主类的名字,那就好 办了, 直接像下面就行: [html] Intent inte ...