由于公司开发需要，博主利用闲暇的时间对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入门：展示数据的更多相关文章

  1. ReactJS入门学习二

    ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事件 如何在JSX中如何使用 ...

  2. ReactJS入门二

    ReactJS入门学习二 ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事 ...

  3. ReactJS入门学习一

    ReactJS入门学习一 阅读目录 React是什么? React如何制作组件? 理解组件属性props 理解页面中如何渲染数据的 理解从服务器端获取数据及理解state的 回到顶部 React是什么 ...

  4. 一看就懂的ReactJs入门教程（精华版）

    一看就懂的ReactJs入门教程(精华版) 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和 ...

  5. ReactJs入门思路

    ReactJs入门思路小指南 原文  http://segmentfault.com/blog/fakefish/1190000002449277 React是怎么搞的? React中,把一切东西都看 ...

  6. ReactJs入门教程-精华版

    原文地址:https://www.cnblogs.com/Leo_wl/p/4489197.html阅读目录 ReactJs入门教程-精华版 回到目录 ReactJs入门教程-精华版 现在最热门的前端 ...

  7. 入门大数据---Spark整体复习

    一. Spark简介 1.1 前言 Apache Spark是一个基于内存的计算框架,它是Scala语言开发的,而且提供了一站式解决方案,提供了包括内存计算(Spark Core),流式计算(Spar ...

  8. 使用UITableView展示数据

    TableView主要用于展示数据,类似于Android中的ListView. 我们可以通过两个方式使用TableView.第一种是直接使用TableView类.第二种是通过UITableViewCo ...

  9. PHP+Mysql+jQuery实现地图区域数据统计-展示数据

    我们要在地图上有限的区块内展示更多的信息,更好的办法是通过地图交互来实现.本文将给大家讲解通过鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息.适用于数据统计和地图区块展示等场景. ...

  10. ReactJS入门指南

    ReactJS入门指南 本文旨在介绍ReactJS的基本知识,并一步步详细介绍React的基本概念和使用方法等,以及相应的Demo.本文在很大程度上参考了React官方文档和官方指南.如果你英语还不错 ...

随机推荐

  1. repeater绑定泛型list<string>

    菜鸟D重出江湖,依然是菜鸟,囧!言归正传—— 工作中遇到一个repeater绑定的问题,数据源是一个list<string> 集合,然后在界面上使用<%#Eval()%>绑定. ...

  2. BZOJ 3432: [Usaco2014 Jan]Cross Country Skiing （二分+染色法）

    还是搜索~~可以看出随着D值的增大能到达的点越多，就2分d值+染色法遍历就行啦~~~ CODE： #include<cstdio>#include<iostream>#incl ...

  3. Javascript学习十

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  4. 第十六篇 基于Bootstarp 仿京东多条件筛选插件的开发(展示上）

    这几天学习Bootstrap,本来是两年前的用的东西,现在又重新拾起来,又有很多重新的认识,看了Bootstrap的样式偏多,插件现在还没有学习到几个,也有写几个插件自己用的想法.正好工作上也会用到, ...

  5. Java基础之数据类型和转换

    一.常见的数据类型分类 1.java中基本数据类型分为三大类,即布尔类型,字符型,数值型.其中数值型又分为整型和浮点型.引用数据类型分为类,接口,数组,枚举,注解.具体如下: 注:一个字节 = 8位 ...

  6. 10条建议让你创建更好的jQuery插件

    在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & paste 大部分的代码结构,只要专注最主要的逻辑代码就行了.使 ...

  7. redux:applyMiddleware源码解读

    前言: 笔者之前也有一篇关于applyMiddleware的总结.是applyMiddleware的浅析. 现在阅读了一下redux的源码.下面说说我的理解. 概要源码: step 1:  apply ...

  8. 基于 Koa平台Node.js开发的KoaHub.js连接打印机的代码

    最近好多小伙伴都在做微信商城的项目,那就给大家分享一个基于 Koa.js 平台的 Node.js web 开发的框架连接微信易联云打印机接口的代码,供大家学习.koahub-yilianyun 微信易 ...

  9. 1232: [Usaco2008Nov]安慰奶牛cheer

    1232: [Usaco2008Nov]安慰奶牛cheer Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 612  Solved: 431[Submi ...

  10. git 由http切换成git

    项目中经常会遇到http 的git 协议为了安全切换成ssh 的git 协议. 这个时候,只要使用如下命令变更 remote 字符串就好了. git remote set-url origin git ...