React入门介绍(2)- React Component-React组件
React Component-React组件
允许用户自由封装组件是React非常突出的特性,用户可将自己创建的组件像普通的HTML标签一样插入页面,React.CreateClass
方法就是用来创建一个组件类的。在创建和调用react组件时有几点需要注意,我们在实际的demo中进行总结。
从一个简单的例子开始,我们尝试创建一个包含文本框和提交按钮的组件:
<div id="container"></div>
<script type="text/babel">
let InputWithButton = React.createClass({
render:function(){
return(
<div>
<input type="text" value="password"/>
<button>Submit</button>
</div>
)
}
});
ReactDOM.render(
<InputWithButton/>,
document.getElementById("container")
)
</script>
运行上述代码,显示结果如下:
在上述代码中,需要注意以下几点:
- 我们创建了一个名为
InputWithButton
的组件类,注意此处命名首字母必须大写,自动生成InputWithButton
实例。 - 所有的组件都必须要有自己的render方法,用以输出组件。
- 在创建组件类时,return的最终结果内只能包含一个顶级标签,如果我们在上例中去掉div标签直接返回
<input>
和<button>
,代码会报错。 - 组件的用法与原生HTML的用法一致,直接在ReactDOM.render中插入
<InputWithButton/>
,注意"/"不能丢,在jsx解析时会根据"/"判断标签的闭合。
另外,像原生的HTML标签一样,可以给组件添加属性,参考如下代码:
<div id="container"></div>
<script type="text/babel">
let InputWithButton = React.createClass({
render:function(){
return(
<div>
<input type="text" value={this.props.value} className="input"/>
<button>{this.props.name}</button>
</div>
)
}
});
ReactDOM.render(
<InputWithButton name="confirm" value="password"/>,
document.getElementById("container")
)
</script>
- 如上例中调用
<InputWithButton/>
标签时,添加的name和value属性,在创建组件类时,可以通过this.props对象是获取组件的属性,在input通过this.props.value给value赋值,在button中通过this.props.name赋值,注意都要包裹在{}内。 - 添加属性时需要注意添加class属性时要用className,for属性用htmlFor,这是因为class和for是JavaScript的保留字。
在使用this.props对象获取属性时,需要注意比较特殊的this.props.children,他表示组件的所有子节点。
<div id="container"></div>
<script type="text/babel">
let FormList = React.createClass({
render:function(){
return(
<form>
{
React.Children.map(this.props.children,function(child){
return <button>{child}</button>;
})
}
</form>
)
}
});
ReactDOM.render(
<FormList>
<span>Submit</span>
<span>Clear</span>
<span>Cancel</span>
</FormList>,
document.getElementById("container")
)
</script>
如上代码,我们尝试创建一个包含三个按钮的form表单,在创建FormList组件类时,通过this.props.children
获取FormList下的子元素,通过React.Children.map
遍历节点。通过React专用的调试工具,我们可以查看FormList组件类的具体组成如下:
对于React的入门还是比较容易的,但想深入掌握还有些路要走,要尽快熟悉JSX的语法规则,主要参考阮一峰大神的react入门实例教程和官方文档。
React入门介绍(2)- React Component-React组件的更多相关文章
- React入门介绍(1)-ReactDOM.render()等基础
React入门介绍-ReactDOM.render()等基础 首先,React是一个用于构建用户界面的Javascript库,但Peact并不是一套完整的MVC或MVVM的框架,它仅涵盖V-view视 ...
- 【React】学习笔记(一)——React入门、面向组件编程、函数柯里化
课程原视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.React 概述 1.1.R ...
- react入门学习及总结
前言 不知不觉一年又过去了,新的一年又到来,2019应该要好好思考,好好学点有用的东西,规划下自己今后的学习方向,不要再像以前那样感觉很迷茫. react简单介绍 官网及中文文档 https://re ...
- client高性能组件化框架React简单介绍、特点、环境搭建及经常使用语法
[本文源址:http://blog.csdn.net/q1056843325/article/details/54729657 转载请加入该地址] 明天就是除夕了 预祝大家新春快乐 [ ]~( ̄▽ ̄) ...
- React入门---可复用组件-10
主要对props更多重要的特性进行学习; 还是用之前代码, index.js代码为: var React = require('react'); var ReactDOM = require('rea ...
- react入门----组件的基础用法
1.组件 <!-- React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件.React.createClass 方法就用于生成一个组件类 ...
- React入门--------组件的生命周期
Mounting/组件挂载相关: componentWillMount componentDidMount Updating/组件更新相关: componentWillReceiveProps sho ...
- react入门(1)
这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...
- React入门最好的学习实例-TodoList
前言 React 的核心思想是:封装组件,各个组件维护自己的状态和 UI,当状态变更,自动重新渲染整个组件. 最近前端界闹的沸沸扬扬的技术当属react了,加上项目需要等等原因,自己也决定花些时间来好 ...
随机推荐
- WEB开发框架系列教程 (一)快速创建解决方案
执行<华东信息辅助开发工具> 程序 打开程序界面如下图 输入用户名.密码进行登录 如果暂时还没有用户名和密码,点击注册提供机器码给管理员进行注册. 管理员QQ:93346562 下图是:点 ...
- arcgis for silverlight 鼠标点击地图获取当前经纬度
silverlight代码: 地图的name值是myMap.后台在页面初始化的时候,添加地图的点击事件 myMap.MouseClick+=new EventHandler<Map.MouseE ...
- PHP中foreach有关引用的问题
软件开发的过程中,细节处理非常重要,说得大一点就是细节决定成败,别人不懂的地方,你懂,别人没注意到的细节,你注意到了,这就是你胜出对方的地方,这样就体现出了你的价值. 下面是几个foreach循环中引 ...
- Linux 常用命令九 tar
一.tar命令 tar命令用于打包,解包. gzip命令用于压缩,解压缩. bzip2命令用于压缩,解压缩. 这三个是在linux中常用的,还有一些不常用的. tar打包: wang@wang:~/w ...
- bzoj 2756 [SCOI2012]奇怪的游戏【二分+最大流】
达成成就:为二分调参 !:多次memset的话要把数组大小开严格一点,否则会T 看到网格图,首先黑白染色. 注意到每次操作都是在一个黑格子和一个白格子上进行的,也就是说,最后黑格子数字和白格子数字和的 ...
- bzoj 2876: [Noi2012]骑行川藏【拉格朗日乘数法+二分】
详见: http://blog.csdn.net/popoqqq/article/details/42366599 http://blog.csdn.net/whzzt/article/details ...
- IEEE Trans 2006 使用K-SVD构造超完备字典以进行稀疏表示(稀疏分解)
K-SVD可以看做K-means的一种泛化形式,K-means算法总每个信号量只能用一个原子来近似表示,而K-SVD中每个信号是用多个原子的线性组合来表示的. K-SVD算法总体来说可以分成两步 ...
- Hdu 3488 Tour (KM 有向环覆盖)
题目链接: Hdu 3488 Tour 题目描述: 有n个节点,m条有权单向路,要求用一个或者多个环覆盖所有的节点.每个节点只能出现在一个环中,每个环中至少有两个节点.问最小边权花费为多少? 解题思路 ...
- 51nod 1024 矩阵中不重复的元素
1024 矩阵中不重复的元素 题目来源: Project Euler 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题 收藏 关注 一个m*n的矩阵. 该矩阵的 ...
- PHP autoload实践
本文目的 本文简要的描述了PHP提供的autoload机制,以及在scake中使用实践.用于减少不必要的文件包含,提高php系统性能. 什么是__autoload php是脚本语言,不同于c++只需要 ...