react展示数据

react做得最好的事,就是配合UI展示数据,通过调用接口,如果返回的数据发生改变,页面展示的数据会自动地发生改变。

react可以使用jsx语法,允许在js代码中直接写html标签,并且在节点上直接绑定数据,在父级和子级之间的同信时,使用props进行通信。props是properties的简写。

为什么react使用jsx更好,请查看http://reactjs.cn/react/docs/jsx-in-depth.html

react的组件其实很简单,可以简单的理解它就是一个函数,通过props和state来渲染页面。

在页面中存值除使用var, es6的let,const等方法还有两种方式,一个是直接绑定到this上面,还有一个是绑定在this.state,它们的区别就是,直接绑定在this上面的数据不能让页面重新渲染,对那些对页面显示没影响的数据、方法等,可以直接绑定在this上面,如果数据发生改变后,需要在页面上面重新显示,就需要绑定在this.state上面了,通过this.setState({}),重新设置了要显示的值后可以使页面重新渲染。在后面的学习部分详细再解释。

特别需要注意的是: react的一个组件,一次只会渲染一个根节点,如果你有多个根节点,你可以使用一个大的div 或者其他的标签把所有的节点包裹一下,使一个组件中只有一个根节点。

简单举例:

错误使用:

import React,{Component, PropTypes} from ‘react‘;

class Main extends Component{
     constructor(props){
        super(this.props);
     }
    render(){
        return(
            <div className="div1"></div>
            <div className="div2"></div>
        )
    }
}    

export default Main;

正确使用:

import React,{Component, PropTypes} from ‘react‘;

class Main extends Component{
     constructor(props){
        super(this.props);
     }
    render(){
        return(
            <div className="divall">
                <div lassName="div1"></div>
                <div lassName="div2"></div>
            </div>
        )
    }
} 

export default Main;

参考链接: http://reactjs.cn/react/docs/displaying-data.html

时间: 2024-10-13 05:21:38

react展示数据的相关文章

Linechart + Datagrid 互动展示数据 (Linechart自定义数据点选择线)

如上图示,在linechart中添加红色Y线,拖动该线的过程中,经过数据点时,会实时更新datagrid中对应的X.Y值数据. 实现要点: 1.linechart添加Y线 继承mx.charts.chartClasses.ChartElement,自定义Y线. package { import flash.display.Graphics; import flash.geom.Point; import flash.text.TextField; import mx.charts.chartCl

repeater灵活运用、repeater的commmand用法、如何不用repeater展示数据

实体类: using System; using System.Collections.Generic; using System.Linq; using System.Web; /// <summary> /// gouwu 的摘要说明 /// </summary> public class gouwu { public gouwu() { // // TODO: 在此处添加构造函数逻辑 // } public int ids { get; set; } public strin

Repeater控件 ---表格展示数据

简介: Repeater控件是Web 服务器控件中的一个容器控件,它使您可以从页的任何可用数据中创建出自定义列表. Repeater 控件不具备内置的呈现功能,这表示用户必须通过创建模板为 Repeater 控件提供布局.当该页运行时, Repeater 控件依次通过数据源中的记录为每个记录呈现一个项. Repeater控件不具备内置的呈现功能,所以我们得用一些模板来实现他的数据呈现 下表描述了 Repeater 控件支持的模板.  模板属性                           

Windows程序==&gt;&gt;使用ListView控件展示数据

使用ListView控件展示数据 01.ImageList控件 1.了解了解         属性 说明 Images 储存在图像列表中的所有图像 ImageSize 图像列表中图像的大小 Transparent 被视为透明的颜色 ColorDepth 获取图像列表的颜色深度 Images中图像的存放方式与存放在数组中一样,通过Count属性可以获得Images中图像的个数.每个图像都有一个索引值,从0开始,使用Images[索引值],可以定位到一个图像. ImageList控件所包含的图像可以

使用UITableView展示数据

TableView主要用于展示数据,类似于Android中的ListView. 我们可以通过两个方式使用TableView.第一种是直接使用TableView类.第二种是通过UITableViewController类. 第一种方式主要是通过实例化一个UITableView类,然后将类实例添加到主界面,代码如下 这样,一个简单的tableview就创建了,当然这个时候界面中是没有数据的. 运行结果如下: 接下来为TableView添加数据.通过查看UITableView类的头文件可知道,该类有一

知识点回顾-tableView展示数据常见设置

如何让tableView展示数据 设置数据源对象 self.tableView.dataSource = self; 数据源对象要遵守协议 @interface ViewController () <UITableViewDataSource> @end 实现数据源方法 // 多少组数据 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView; // 每一组有多少行数据 - (NSInteger)tableView:(

C#-WebForm-Repeater的灵活运用、ItemCommand的用法-增删改查、如何不适用Repeater来展示数据?

浏览器页面: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="

【安卓9】SimpleCursorAdapter、在列表中展示数据

SimpleCursorAdapter SimpleCursorAdaper与SimpleAdapter类似,但数据来源是Cursor. 操作步骤: 在列表中展示数据 1 public MySQLiteOpenHelper(Context context) { 2 super(context,"person.db",null,1); 3 } 4 public void onCreate(SQLiteDatabase db) { 5 db.execSQL("create tab

用旭日图展示数据的三种方法

什么是旭日图? 旭日图(Sunburst Chart)是一种现代饼图,它超越传统的饼图和环图,能表达清晰的层级和归属关系,以父子层次结构来显示数据构成情况.旭日图中,离远点越近表示级别越高,相邻两层中,是内层包含外层的关系. 在实际项目中使用旭日图,可以更细分溯源分析数据,真正了解数据的具体构成.而且,旭日图不仅数据直观,而且图表用起来特别炫酷,分分钟拉高数据汇报的颜值!很多数据场景都适合用旭日图,比如,在销售汇总报告中,方便看到每个店铺的销售业绩分布(如下图): 做旭日图的三种方法 1. 用E