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.
随机推荐
- jstl标签: c:Foreach详解
为循环控制,它可以将集合(Collection)中的成员循序浏览一遍.运作方式为当条件符合时,就会持续重复执行的本体内容. 为循环控制,它可以将集合(Collection)中的成员循序浏览一遍.运作方 ...
- 【转】Selenium模拟JQuery滑动解锁
滑动解锁一直做UI自动化的难点之一,我补一篇滑动解锁的例子,希望能给初做Web UI自动化测试的同学一些思路. 首先先看个例子. https://www.helloweba.com/demo/2017 ...
- lua ffi简介
本文转自网络 由来 FFI库,是LuaJIT中最重要的一个扩展库.它允许从纯Lua代码调用外部C函数,使用C数据结构.有了它,就不用再像Lua标准math库一样,编写Lua扩展库.把开发者从开发Lua ...
- 学习笔记::kmp
matrix67 nxt[i]:[1-i]中最长公共前后缀的长度 j=0;;i<=n;i++) { ]) j=nxt[j]; ]) j++; nxt[i]=j; }
- centos7用lvm扩展xfs文件系统的根分区
centos7中默认使用的是xfs文件系统,此文件系统的特点,可以另外查找资料,这里说一下对文件系统的扩容: 1.先看一下没扩容之前的分区大小 2.添加一块新磁盘,并进行分区.格式化(格式化的时候用m ...
- 算法学习--Day3
今天搞了一波算法的哈希,代码难道不大,记录在这里吧. 题目描述 “臭味相投”——这是我们描述朋友时喜欢用的词汇.两个人是朋友通常意味着他们存在着许多共同的兴趣.然而作为一个宅男,你发现自己与他 ...
- 51nod1432【贪心】
对于每个数我找一个和他相加最接近独木舟,然后ans+=1; 想复杂了,直接两端来就好了. 然后两个相加如果<=m那么就让它们在一起,不是的话就让大的一艘船,然后继续搞(贪心) #include ...
- <TLE>奇偶剪枝hdoj1010
(奇偶剪枝)转自百度百科,讲的非常棒: http://baike.baidu.com/link?url=3g5bW7LszRVOVvFDFp6cL0ZZnAaOLUdpaNjc2leHoxkKU9Eh ...
- C#中自定义类数组和结构数组的使用
如有雷同,不胜荣幸,若转载,请注明 C#中自定义类数组和结构数组的使用 最近在很多项目中发现很多时候给定的数组要实现某个逻辑或处理很是麻烦,一维数组,二维数组,,,等等需要经过n多转换,还不如自己写一 ...
- AtCoder Grand Contest 001 D - Arrays and Palindrome
题目传送门:https://agc001.contest.atcoder.jp/tasks/agc001_d 题目大意: 现要求你构造两个序列\(a,b\),满足: \(a\)序列中数字总和为\(N\ ...