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>

运行上述代码,显示结果如下:



在上述代码中,需要注意以下几点:

  1. 我们创建了一个名为InputWithButton的组件类,注意此处命名首字母必须大写,自动生成InputWithButton实例。
  2. 所有的组件都必须要有自己的render方法,用以输出组件
  3. 在创建组件类时,return的最终结果内只能包含一个顶级标签,如果我们在上例中去掉div标签直接返回<input><button>,代码会报错。
  4. 组件的用法与原生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>

  1. 如上例中调用<InputWithButton/>标签时,添加的name和value属性,在创建组件类时,可以通过this.props对象是获取组件的属性,在input通过this.props.value给value赋值,在button中通过this.props.name赋值,注意都要包裹在{}内。
  2. 添加属性时需要注意添加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组件的更多相关文章

  1. React入门介绍(1)-ReactDOM.render()等基础

    React入门介绍-ReactDOM.render()等基础 首先,React是一个用于构建用户界面的Javascript库,但Peact并不是一套完整的MVC或MVVM的框架,它仅涵盖V-view视 ...

  2. 【React】学习笔记(一)——React入门、面向组件编程、函数柯里化

    课程原视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.React 概述 1.1.R ...

  3. react入门学习及总结

    前言 不知不觉一年又过去了,新的一年又到来,2019应该要好好思考,好好学点有用的东西,规划下自己今后的学习方向,不要再像以前那样感觉很迷茫. react简单介绍 官网及中文文档 https://re ...

  4. client高性能组件化框架React简单介绍、特点、环境搭建及经常使用语法

    [本文源址:http://blog.csdn.net/q1056843325/article/details/54729657 转载请加入该地址] 明天就是除夕了 预祝大家新春快乐 [ ]~( ̄▽ ̄) ...

  5. React入门---可复用组件-10

    主要对props更多重要的特性进行学习; 还是用之前代码, index.js代码为: var React = require('react'); var ReactDOM = require('rea ...

  6. react入门----组件的基础用法

    1.组件 <!-- React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件.React.createClass 方法就用于生成一个组件类 ...

  7. React入门--------组件的生命周期

    Mounting/组件挂载相关: componentWillMount componentDidMount Updating/组件更新相关: componentWillReceiveProps sho ...

  8. react入门(1)

    这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...

  9. React入门最好的学习实例-TodoList

    前言 React 的核心思想是:封装组件,各个组件维护自己的状态和 UI,当状态变更,自动重新渲染整个组件. 最近前端界闹的沸沸扬扬的技术当属react了,加上项目需要等等原因,自己也决定花些时间来好 ...

随机推荐

  1. WEB开发框架系列教程 (一)快速创建解决方案

    执行<华东信息辅助开发工具> 程序 打开程序界面如下图 输入用户名.密码进行登录 如果暂时还没有用户名和密码,点击注册提供机器码给管理员进行注册. 管理员QQ:93346562 下图是:点 ...

  2. arcgis for silverlight 鼠标点击地图获取当前经纬度

    silverlight代码: 地图的name值是myMap.后台在页面初始化的时候,添加地图的点击事件 myMap.MouseClick+=new EventHandler<Map.MouseE ...

  3. PHP中foreach有关引用的问题

    软件开发的过程中,细节处理非常重要,说得大一点就是细节决定成败,别人不懂的地方,你懂,别人没注意到的细节,你注意到了,这就是你胜出对方的地方,这样就体现出了你的价值. 下面是几个foreach循环中引 ...

  4. Linux 常用命令九 tar

    一.tar命令 tar命令用于打包,解包. gzip命令用于压缩,解压缩. bzip2命令用于压缩,解压缩. 这三个是在linux中常用的,还有一些不常用的. tar打包: wang@wang:~/w ...

  5. bzoj 2756 [SCOI2012]奇怪的游戏【二分+最大流】

    达成成就:为二分调参 !:多次memset的话要把数组大小开严格一点,否则会T 看到网格图,首先黑白染色. 注意到每次操作都是在一个黑格子和一个白格子上进行的,也就是说,最后黑格子数字和白格子数字和的 ...

  6. bzoj 2876: [Noi2012]骑行川藏【拉格朗日乘数法+二分】

    详见: http://blog.csdn.net/popoqqq/article/details/42366599 http://blog.csdn.net/whzzt/article/details ...

  7. IEEE Trans 2006 使用K-SVD构造超完备字典以进行稀疏表示(稀疏分解)

    K-SVD可以看做K-means的一种泛化形式,K-means算法总每个信号量只能用一个原子来近似表示,而K-SVD中每个信号是用多个原子的线性组合来表示的.    K-SVD算法总体来说可以分成两步 ...

  8. Hdu 3488 Tour (KM 有向环覆盖)

    题目链接: Hdu 3488 Tour 题目描述: 有n个节点,m条有权单向路,要求用一个或者多个环覆盖所有的节点.每个节点只能出现在一个环中,每个环中至少有两个节点.问最小边权花费为多少? 解题思路 ...

  9. 51nod 1024 矩阵中不重复的元素

    1024 矩阵中不重复的元素  题目来源: Project Euler 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题  收藏  关注 一个m*n的矩阵. 该矩阵的 ...

  10. PHP autoload实践

    本文目的 本文简要的描述了PHP提供的autoload机制,以及在scake中使用实践.用于减少不必要的文件包含,提高php系统性能. 什么是__autoload php是脚本语言,不同于c++只需要 ...