ReactJS入门：展示数据
由于公司开发需要，博主利用闲暇的时间对ReactJS的基础知识进行了一些粗浅的认识和了解。博主对ReactJS的学习主要来自官网（http://reactjs.cn/react/docs/thinking-in-react.html）。下面分享一下笔者在学习过程中的一些总结。
本节主要介绍React的模板，属性传递及拓展。
1.React 的模板，读者可以在“// To add your code here.”处添加自己的测试代码进行研究。在浏览器中打开http// localhost：8080/index.html 查看效果。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
//导入相关JS文件
<script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
// To add your code here.
</script>
</body>
</html>
其中，<div id="content"></div>是自定义HTML标签、组件插入显示的位置；
<script type="text/babel">的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。
导入的JS文件：react.js是React的核心库，
react-dom.js提供与DOM相关的功能，
brower.min.js将JSX语法转换为JavaScript语法。
2.React 通过ReactDOM.render（）渲染HTML标签和React组件，React通过大小写区分本地的组件类和HTML标签
2.1 React 渲染HTML标签，变量名的首字母必须小写
var myDivElement = <div className="foo" >Hello React</div>;
ReactDOM.render(myDivElement, document.getElementById('content'));
注意：由于JSX是JavaScript，因此不要将类别和类型的标识符作为XML属性名称。 相反，React DOM组件分别期望DOM属性名称，如className 和htmlFor。
该代码的简单写法为：
ReactDOM.render(
<div className="foo" >Hello React</div>,
document.getElementById('content')
);
2.2 React 渲染React组件，变量名的首字母必须大写
var MyComponent = React.createClass({/*...*/});
ReactDOM.render(
<MyComponent />, document.getElementById('content')
);
React.createClass 方法就用于生成一个组件类。例子如下：
var HelloWorld = React.createClass({
render: function() {
return (//此处只允许返回一个顶层标签
<p>Hello, <input type="text" placeholder="Your name here" />!</p>
);
}
});
ReactDom.render(
<HelloWorld />,
document.getElementById('content')
);
3.使用this.props获取组件属性/子类
注意：this.props.属性名 --> 返回 属性值； this.props.children --> 返回子类元素。
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
author:{this.props.author}
</h2>
children:{this.props.children}
</div>
);
}
});
ReactDOM.render(
<Comment author="wei.hu" >hello</Comment>,
document.getElementById('content')
);
4.处理数据集合
注意： 在数组或者迭代器中的每一个子类对象必须有唯一的一个key.
4.1.一般数组集合
var names =['Tom','Thomas','Alley'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div key={name.toString()}>Hello, {name}!</div>
})
}
</div>,
document.getElementById('content')
);
2.Json集合
var data = [
{id: 1, author: "Pete Hunt", text: "This is one comment"},
{id: 2, author: "Jordan Walke", text: "This is *another* comment"}
];
var CommentBox = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function(comment) {
return (
<div key={comment.id}>
author={comment.author},
text={comment.text}
</div>
);
});
return (
<div className="commentBox">{commentNodes}</div>
);
}
});
ReactDOM.render(
<CommentBox data={data} />,
document.getElementById('content')
);
5.属性拓展
有时候，我们会遇到这样的情况。当我们创建组件时，无法确定设置哪些属性。而在后期使用时需要将某些属性添加到对象中。而有时候，我们需要修改对象的某些属性的值。具体实现如下：
5.1将属性添加到对象中
//前期：创建组件
var Component = React.createClass({
render : function(){
return (<div>Spread Attribute</div>);
}
});
//后期：将属性添加到对象中
var props = {};
props.foo = 'x';
props.bar = 'y';
//将传入对象的属性复制到组件的props上
var component = <Component {...props} />;//将属性复制到组件中
console.log(component.props);//控制台输出：Object {foo: "x", bar: "y"}
5.2 修改对象中某些属性的值
//前期：创建属性
var Component = React.createClass({
render : function(){
return (<div>Spread Attribute</div>);
}
});
var props = { foo: 'default' ,bar: 'bar'};//属性原有的值
//后期：修改部分属性的值
var component = <Component {...props} foo={'override'} />;
console.log(component.props);//Object {foo: "override", bar: "bar"}
5.3 转移属性的快捷方式：将CheckLink组件的属性复制到底层的HTML元素(<a>)
var CheckLink = React.createClass({
render: function() {
// This takes any props passed to CheckLink and copies them to <a>
return <a {...this.props}>{this.props.children}</a>;
}
});
ReactDOM.render(
<CheckLink href="/checked.html">
Click here!
</CheckLink>,
document.getElementById('content')
);
6.以JSON的形式输出this.props中的数据
var Component = React.createClass({
render : function(){
return (<div>{JSON.stringify(this.props)}</div>);
}
});
var component = <Component foo='x' bar='y' />;
ReactDOM.render(
component,document.getElementById('content')
);
未完，待续。
更多内容，请访问：http://www.cnblogs.com/BlueStarWei/
ReactJS入门：展示数据的更多相关文章
- ReactJS入门学习二
ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事件 如何在JSX中如何使用 ...
- ReactJS入门二
ReactJS入门学习二 ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事 ...
- ReactJS入门学习一
ReactJS入门学习一 阅读目录 React是什么? React如何制作组件? 理解组件属性props 理解页面中如何渲染数据的 理解从服务器端获取数据及理解state的 回到顶部 React是什么 ...
- 一看就懂的ReactJs入门教程（精华版）
一看就懂的ReactJs入门教程(精华版) 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和 ...
- ReactJs入门思路
ReactJs入门思路小指南 原文 http://segmentfault.com/blog/fakefish/1190000002449277 React是怎么搞的? React中,把一切东西都看 ...
- ReactJs入门教程-精华版
原文地址:https://www.cnblogs.com/Leo_wl/p/4489197.html阅读目录 ReactJs入门教程-精华版 回到目录 ReactJs入门教程-精华版 现在最热门的前端 ...
- 入门大数据---Spark整体复习
一. Spark简介 1.1 前言 Apache Spark是一个基于内存的计算框架,它是Scala语言开发的,而且提供了一站式解决方案,提供了包括内存计算(Spark Core),流式计算(Spar ...
- 使用UITableView展示数据
TableView主要用于展示数据,类似于Android中的ListView. 我们可以通过两个方式使用TableView.第一种是直接使用TableView类.第二种是通过UITableViewCo ...
- PHP+Mysql+jQuery实现地图区域数据统计-展示数据
我们要在地图上有限的区块内展示更多的信息,更好的办法是通过地图交互来实现.本文将给大家讲解通过鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息.适用于数据统计和地图区块展示等场景. ...
- ReactJS入门指南
ReactJS入门指南 本文旨在介绍ReactJS的基本知识,并一步步详细介绍React的基本概念和使用方法等,以及相应的Demo.本文在很大程度上参考了React官方文档和官方指南.如果你英语还不错 ...
随机推荐
- 第四章:JQuery选择器
一.使用选择器的目的 从页面上的万万千千个元素中选择自己需要的. 二.选择器的分类 1.基本选择器 *:标签 *:类 *:ID 交集 AB AB共同的部分 并集 A,B AB使用相同的 ...
- 阿里云LINUX服务器配置HTTPS(NGINX)
本文首发于:http://www.fengzheng.pub/archives/238.html 背景说明 服务器为阿里云 ECS,操作系统为 CentOS 6.5. 部署配置说明 第一步,安装ngi ...
- 每天一个linux命令(51)--grep命令
linux系统中grep 命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来.grep 全称是 global regular expression print,表示全局正则 ...
- SQL SERVER 事务日志 解析
1 基本介绍 每个数据库都具有事务日志,用于记录所有事物以及每个事物对数据库所作的操作. 日志的记录形式需要根据数据库的恢复模式来确定,数据库恢复模式有三种: 完整模式,完全记录事物日志,需要定期进行 ...
- MySQL学习分享--数值类型
数值类型 MySQL的数值类型包括整数类型.浮点数类型.定点数类型.位类型. 整数类型 MySQL支持的整数类型有tinyint.smallint.mediumint.int.bigint(范围从小到 ...
- 移动端click事件延迟300ms到底是怎么回事，该如何解决？
不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...
- Robot Framework中经常用的第三方库的安装方法
pip升级:python -m pip install --upgrade pip 一.安装robotframework-selenium2library,相当于python中的selenium ...
- Linux部署与基本指令
把以前写的linux发布一下下吧,写的真的好差劲... Linux部署 chmod:改变一个文件的权限 改变abc的权限为777 常用的权限: 777-644-755 ************** ...
- Struts2学习笔记⑧
今天是Struts2学习笔记的最后一篇文章了.用什么做结尾呢,这两天其实还学了很多东西,没有记录下,今天就查漏补缺一下. 文件上传与下载.FreeMarker以及昨天没做完的例子 文件上传与下载 文件 ...
- java初级开发一系列的工具安装配置
最近压力很大,刚刚帮朋友安装了一整套环境,按照印象写下此篇记录(没有图解),一是用来释放压力,二来希望可以帮到各位. 一.首先,Eclipse的安装,下载eclipse压缩包,一般为200~300M, ...