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.
随机推荐
- ssl原理及应用
今天学习网络通信,看到使用ssl(Secure Sockets Layer)进行加密,由于对ssl只是有些概念上的了解,对于具体应用原理.过程和如何使用不慎了解,于是学习了一番,总结如下: 1. 为什 ...
- Codeforces-707D：Persistent Bookcase （离线处理特殊的可持久化问题&&Bitset）
Recently in school Alina has learned what are the persistent data structures: they are data structur ...
- 伪元素 first-letter
::after, ::before, ::backdrop, ::first-letter,::first-line, ::selection(css3)是伪元素, :active, :focus, ...
- Meet User Expectations---满足用户的期待
Back to App Design Meet User Expectations OS X incorporates the latest technologies for creating gre ...
- Unity3D教程：换装方法
http://www.manew.com/4136.html 游戏内的角色,能够像纸娃娃换装那样子让玩家可以为自己的角色改变外观,一直是相当受欢迎的功能:一般而言,我们建好的 3D 模型,如果要将其中 ...
- Cg（C for Graphic）语言表达式与控制语句（转）
摘抄“GPU Programming And Cg Language Primer 1rd Edition” 中文名“GPU编程与CG语言之阳春白雪下里巴人” 在上一章中,我们已经介绍了 Cg 语言的 ...
- IT兄弟连 JavaWeb教程 使用Java同步机制对多线程同步
对于前面AdderServlet案例,它的sum实例变量用来累计客户端请求进行加法运算的和.sum变量的初始为100,如果第一个客户请求加上100,那么sum变量变为200,接着第二个客户请求加上20 ...
- PJzhang:左耳朵耗子-陈皓
猫宁!!! 参考链接:https://coolshell.cn/haoel 左耳朵耗子原名陈皓,那个是他的网络ID,在我眼中是个值得尊敬的程序员,虽然我对他真人没什么了解. 这是他博客的自我介绍: 2 ...
- Luogu P1373 小a和uim之大逃离【dp】By cellur925
题目传送门 $50pts$:容易设计出状态$f[i][j][l][r][st]$表示当前的这个人在($i$,$j$),小a和uim魔瓶中的含量分别为$l$,$r$,当$st=0$表明现在是小a在吃,当 ...
- only-child选择器
:only-child选择器用于匹配属于某一个父元素的唯一子元素的元素,也就是说,如果某个父元素仅有一个子元素,则使用 :only-chlid选择器 ,可以选择这个子元素