Model 原型

  Comment Box

  <div className="commentBox">

    <h1>Comments</h1>

    <CommentList />

    <CommentForm/>

  </div>

React中,可以定义类似的模型

在这里我们可以看到我们熟悉的模型,例如 div h1,但是也能看到我们自定义的CommentList CommentForm.

而对于这个CommentList呢,自己又需要重新定义这个一个字模型,当然,他最后呈现的是一个数组,多条记录的显示,类似论坛里面我们看到的一条条记录。

完整的CommentList定义。

var CommentList=React.createClass({
    render:function(){
    var commentNodes=this.props.data.map(function(comment,index){
        return (
        <Comment author={comment.author} key={index}>
            {comment.text}
        </Comment>
    );
    });
    return (
        <div className="commentList">
        {commentNodes}
    </div>
    );
    }
});其中又包含了Comment定义

var Comment = React.createClass({
    render:function(){
var rawMarkup=converter.makeHtml(this.props.children.toString());
    return (
     <div className="comment">
        <h2 className="commentAuthor">
            {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={{__html:rawMarkup}}/>
    </div>
    );
    }
});

我们能看到,到这里算是告一段落了。

所以这里主要展示React的基本结构,可以自定义一些tag,然后对每个新tag构建自己的html结构。如此html构建起来更加自由,且有一些面向对象的思想在里面了。

React 篇 Comment Model的更多相关文章

  1. react+dva 全局model中异步获取数据state在组件中取不到值

    先上结论,不是取不到,是写法有问题. 全文分4部分,1是问题描述,2是一开始的解决想法(错误做法),3是问题产生原因的思考,4是正常解决方法.只想看结论直接跳4 1.问题描述 接触react dva一 ...

  2. Django(进阶篇)之model

    Model 解析 Django的数据库,涉及相关操作时就是以下流程: 1.创建数据库,设计表结构和字段 2.使用Mysqldb来连接数据库,并编写数据访问层 3.业务逻辑层去调用数据访问层执行数据库操 ...

  3. Django中级篇之Model专题

    ORM 就是用面向对象的方式去操作数据库的创建表以及增删改查等操作 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据 ...

  4. 前端面试题整理—React篇

    1.说一下React React是Facebook 开发的前端JavaScript库 V层:react并不是完整的MVC框架,而是MVC中的C层 虚拟DOM:react引入虚拟DOM,每当数据变化通过 ...

  5. React篇-子组件调用父组件方法,并传值

    react 中子组件调用父组件的方法,通过props: 父组件: isNote(data){} <div className="tabC01"> <FTab ta ...

  6. React 篇 Search Bar and content Table

    我们要构建一个模块,其中包含一个内容显示的表格,然后上面有一个提供Search的栏位,并对Search中输入栏进行监听,当有改变的时候,触发Search然后对内容表中的内容进行过滤. Demo Lin ...

  7. React篇-报错信息:warning: Can't call setState (or forceUpdate) on an unmounted component.

    报错信息是: Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but ...

  8. React篇-滚动条下移的触发在react的生命周期分析

    项目的要求是一个chartUI方式的聊天显示页面,根据聊天信息的不断增加,页面需要滑动一定距离,这样能看到最新的聊天结果,这样就需要在聊天结果返回之后触发滚动条向下滚动到一定的距离,代码如下: com ...

  9. 如何使用TDD和React Testing Library构建健壮的React应用程序

    如何使用TDD和React Testing Library构建健壮的React应用程序 当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序. 每次我想测试它时 ...

随机推荐

  1. 一步步搭建java信息管理系统00 - 前言

    开发前,先上效果图吧 信息管理系统,个人认为,以下几个因素是不可缺少的 多tab 因菜单比较多,右侧的树形一定要考虑,如果菜单还是多,那么顶部就要考虑起来了 以后想到什么,再添加吧. 看到easyui ...

  2. CSS聊天气泡

    概述 谷歌效果图如下: ie效果图如下: 完整代码 <!DOCTYPE html> <html> <head> <meta charset="gbk ...

  3. openstack setup demo Image service

    Image service (glance)是openstack中管理vm image的service.本文包含以下内容: overview install overview glance包含以下部分 ...

  4. IE網址欄快速輸入網址,“Ctrl+Enter”補齊“.com”

    繁體中文Windows,預設 IE 在網址列輸入 abc,然後按 Ctrl+Enter ,會跳到www.abc.com.tw, 但較常用的連結是www.abc.com,如何修改这一設定呢? 可以透過修 ...

  5. 多路转接模型之poll

    poll系统调用和select类似.也是在指定时间内轮询一定数量的文件描写叙述符,以測试当中是否有就绪者.poll和select效率差点儿相同,仅仅是其使用接口相对简单些,poll不在局限于1024个 ...

  6. ISkyShop B2B2C 商城系统V1.0正式版隆重公布

    ISkyShop核心开发团队结合7年电商开发经验,历经1年多时间的设计研发,于2014年6月12日隆重推出ISkyShop B2B2C 商城系统V1.0,B2B2C商城系统是ISkyShop独立自主研 ...

  7. RHEL6.5上Oracle ACFS与Linux samba一起使用时遇到的bug

    RHEL上的Oracle ACFS与linux samba一起使用时遇到的bug 一.环境介绍: cat /etc/issue的结果为: Red Hat Enterprise Linux Server ...

  8. 【Linux多线程】三个经典同步问题

    在了解了<同步与互斥的区别>之后,我们来看看几个经典的线程同步的例子.相信通过具体场景可以让我们学会分析和解决这类线程同步的问题,以便以后应用在实际的项目中. 一.生产者-消费者问题 问题 ...

  9. WebLog Expert

    Weblog expert是一个快速和强大的访问日志分析器.这会让你了解你的网站的访客:活动统计,访问的文件的路径,通过该网站,信息指页面,搜索引擎,浏览器,操作系统,和更多.该计划所产生的易于阅读的 ...

  10. 打开与关闭Linux防火墙

    1) 重启后生效 开启: chkconfig iptables on 关闭: chkconfig iptables off 2) 即时生效,重启后失效 开启: service iptables sta ...