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官方文档和官方指南.如果你英语还不错 ...

随机推荐

iptables禁止ping入
iptables禁止ping入以下设置将允许自己往外ping 不允许别人ping自己 vi /etc/sysconfig/iptables 加入如下2条规则 -A INPUT -p icmp --i ...
Tomcat8 + Redis实现session集中管理
环境准备: 部署两台 tomcat 8.0 安装 redis 服务器下载工具库( commons-pool2-2.3.jar.jedis-2.7.2.jar .改良版的 tomcat ...
使用Nuget管理dll
前言 nuget 已经不是什么新东西,它是vs的一个扩展工具,可以让我们在项目中添加.删除.更新引用变得更加快捷方便.现在有许多传统公司对dll的管理还是很落后的,有些甚至时通过发送dll文件,这样做 ...
asp.net中listview下嵌套gridview
最近在上软件工程实践课程,想做一个类似于QQ空间或者朋友圈一样的效果.即显示所有好友发送的动态以及动态下回复的信息. 自己YY了一种方法,一开始以为不能达到效果,研究了2个小时终于实现了,感觉效果还是 ...
HDU---Labyrinth
Labyrinth Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
perl 获取系统时间
最近需要将字符串转换成时间,找了下资料,实战如下,发现时timelocal费了些时间 strftime也可在 c / c++ / awk / php 中使用,用法基本一致. 这个也不错 $time = ...
前端布局常见IE6 bug的解决方法，清除浮动的几种方法以及各自的优缺点
相信有很多前端的朋友再布局的时候经常面对IE6咬牙切齿,尤其是刚刚入行的朋友,在这里给大家一点常见问题的解决方案,希望对大家有所帮助 1)png24位的图片在iE6浏览器上出现背景,解决方案是做成PN ...
提交Sublime Text 插件到Package Control
最近写了一个lua智能提示的插件LuaSmartTips.这个插件一直都是自己一个人在用,昨天突然想把插件提交到Package Control,如果其他的人有这样的需求就可以直接安装. Package ...
java基础：数组的拼接
转换器3：手写PHP转Python编译器，词法部分
上周写了<ThinkPhp模板转Flask.Django模板> 一时技痒,自然而然地想搞个大家伙,把整个PHP程序转成Python.不比模板,可以用正则匹配偷懒,这次非写一个Php编译器不 ...

ReactJS入门：展示数据

ReactJS入门：展示数据的更多相关文章

随机推荐

热门专题