刚刚接触react   可能写的地方有错误或者不完善的地方欢迎大家给指正

下面开始正题

首先分析页面基于react的特性--把页面中所有显示内容看做模块加载

  1. 本页面可以看做一个大的模块，我们暂且命名为commentbox
  2. 评论列表是由一条条的评论内容组成，所以把评论内容comment，单独作为一个模块，然后放在评论列表的模块里commentlist
  3. 底部的输入框作为一个输入模块commentform

页面分析完成开始准备

基于jspm工具首先安装jspm

在终端

npm init

然后安装jspm

npm install jspm --save-dev

然后配置

jspm init

安装需要的依赖

jspm install jquery

jspm install react@0.14.0-rc1

jspm install react-dom@0.14.0-rc1

本文中使用了semantic-ui的样式因此安装

jspm install semantic-ui

使用css安装

jspm install css

然后  在本地新建文件结构如下

然后在终端

browser-sync start --server --no-notify --files 'index.html,app/**/*.js'

配置本地服务器  并监视index.html和js文件的变化

下面正式开始：：：：：

首先我们利用react创建一个静态版本

在index.html引入js文件

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>react</title>

  </head>

  <body>

    <div class="ui container" style="padding:30px;">

      <div id="app"></div>

    </div>

    <script src="jspm_packages/system.js" charset="utf-8"></script>

    <script src="config.js"> </script>

    <script>

      System.import('app/main');

    </script>

  </body>

</html>

然后在main.js中

'use strict';

import 'semantic-ui/semantic.min.css!';

import React from 'react';

import ReactDOM from 'react-dom';

ReactDOM.render(

    <h1 className="ui">你好</h1>,

  document.getElementById('app')

)

就能看到页面上出现你好两个字

tips：h1标签后要有逗号分隔

因为react是模块化结构所以我们把各个模块分别写在单独的js文件中。

我们开始下最基础的commentbox组件

在组件中第一件事就是引入react

'use strict';

import React from 'react';

import $ from "jquery";

class CommentBox extends React.Component{

  render(){   //render方法内写的是需要返回在页面上的元素这里有几个重要点
　　　　　　　　　　　　//1、里面的元素必须在最外层加上div等标签，否则会报错原因：初学好没弄清楚
　　　　　　　　　　　　//2、元素成对出现标签必须闭合
　　　　　　　　　　　　//3、class为保留字，所以使用className
　　　　　　　　　　　　//4、jsx语法要求组件名称首字母大写；否则报错（耽误了好长时间找不出的错~~）

    return(

      <div className="ui comments">

        <h1>评论</h1>

        <div className="ui divider"></div>

      </div>

    )

  }

}

export {CommentBox as default};

然后在main.js中引入commentBox

import CommentBox from './comment/CommentBox';    //注意from后面文件路径

现在页面的显示

然后我们写评论列表commentform的js

然后把这个内容作为默认内容导出后引入到commentbox页面

然后在main页面使用commentbox标签输出，因为我们定义好组件所以我们可以直接使用组件名，来显示对应的元素

页面显示如下

然后安装相同的方法定义评论列表就不赘述了

我们如果使用react就是因为他在处理数据变化时候对于dom元素的修改效率很高

所以做了一下使用ajax读取json数据并反映到页面上

此处用到props和state等属性。

  • 属性(props)是由父组件传递给子组件的；
  • 状态(state)是子组件内部维护的数据，当状态发生变化的同时，组件也会进行更新。当状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出相应。

首先创建一个comments.json的文件

[

  {"author":"杨倩","date":"5 分钟前","text":"天气不错啊"},

  {"author":"杨晨","date":"3 分钟前","text":"出去玩啊！"},

    {"author":"杨倩","date":"5 分钟前","text":"天气不错啊"},

    {"author":"杨晨","date":"3 分钟前","text":"出去玩啊！"},

      {"author":"杨倩","date":"5 分钟前","text":"天气不错啊"},

      {"author":"杨晨","date":"3 分钟前","text":"出去玩啊！"},

  {"author":"王凌峰","date":"2分钟前","text":"不去"}

]

　　然后在main.js里面引入json

'use strict';

import 'semantic-ui/semantic.min.css!';

import React from 'react';

import ReactDOM from 'react-dom';

import CommentBox from './comment/CommentBox';

ReactDOM.render(

  <CommentBox url="app/comments.json" />,

  document.getElementById('app')

)

　　然后commentBox.js页面通过ajax获取数据

'use strict';

import React from 'react';

import CommentList from "./CommentList";

import CommentForm from "./CommentForm";

import $ from "jquery";

class CommentBox extends React.Component{

constructor(props){  //传入props即能获取json的url

  super(props);

  this.state = {data:[]};   //给元素的state赋值一个空的数组由下边getcomments获取数据

  this.getComments();

  //setInterval(() => this.getComments(),5000);

}

handleCommentSubmit(comment){

  console.log(comment );

  let comments = this.state.data,

  newComments = comments.concat(comment);

  this.setState({data:newComments});

}

getComments(){

  $.ajax({

    url: this.props.url,     //取得url

    dataType:"json",

    cache:false,

    success: comments => {

      this.setState({data:comments});   //得到json数组   通过setSatate设置显示的数据对应着comment.js看

    },

    error:(xhr,status,error)=>{

      console.log(error);

    }

  })

}

  render(){

    return(

      <div className="ui comments">

        <h1>评论</h1>

        <div className="ui divider"></div>

      <CommentList data={this.state.data}/>

      <CommentForm onCommentSubmit = {this.handleCommentSubmit.bind(this)}/>

      </div>

    )

  }

}

export {CommentBox as default};

　　comment.js

'use strict';

import React from "react";

class Comment extends React.Component{

  render(){

    return(

      <div className="comment">

        <div className="content">

          <span className="author">{this.props.author}</span>     //取得json数组中的值，props传入的为上级state的值

          <div className="metadata">

            <span className="date">{this.props.date}</span>

          </div>

          <div className="text">{this.props.children}</div>

        </div>

      </div>

    )

  }

}

export {Comment as default};

　　commentform.js

'use strict';

import React from 'react';

class CommentForm extends React.Component{

  handleSubmit(event){

    event.preventDefault();

    // console.log("提交表单……");

    let author = this.refs.author.value;

    let text = this.refs.text.value;

    // console.log(text);

    function dataToString(d) {

      return[

        d.getHours(),

        d.getMinutes(),

        d.getSeconds()

      ].join(":");

    };

    let date = dataToString(new Date());

    this.props.onCommentSubmit({author,text,date})

  }

  render(){

    return(

      <form className="ui reply form" onSubmit = {this.handleSubmit.bind(this)}>

        <div className="field">

          <input type="text" placeholder="姓名" ref="author"/>

        </div>

        <div className="field">

         <textarea placeholder="评论" ref="text"></textarea>

        </div>

        <button type="submit" className="ui blue button" >添加评论 </button>

      </form>

    )

  }

}

export {CommentForm as default};

　　commentlist

'use strict';

import React from 'react';

import Comment from './Comment';

class CommentList extends React.Component{

  render(){

    let commentNodes = this.props.data.map(comment => {

      return(

        <Comment author={comment.author} date={comment.date}>

          {comment.text}

        </Comment>

      );

    });

    return(

      <div>

        {commentNodes}

      </div>

    )

  }

}

export {CommentList as default};

使用react做的聊天对话列表的更多相关文章

  1. Android高级控件（五）——如何打造一个企业级应用对话列表,以QQ，微信为例

    Android高级控件(五)--如何打造一个企业级应用对话列表,以QQ,微信为例 看标题这么高大上,实际上,还是运用我么拿到listview去扩展,我们讲什么呢,就是研究一下QQ,微信的这种对话列表, ...

  2. 4-13 Webpacker-React.js; 用React做一个下拉表格的功能: <详解>

    Rails5.1增加了Webpacker: Webpacker essentially is the decisions made by the Rails team and bundled up i ...

  3. 用Swoole+React 实现的聊天室

    前后端分离的项目,使用 Swoole+React 实现的聊天室,整个项目的框架结构可以进行参考,前端 react+react-redux+react-router+react-ant 等等,后台使用 ...

  4. Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互

    引言 在与实现了语音合成.语义分析.机器翻译等算法的后端交互时,页面可以设计成更为人性化.亲切的方式.我们采用类似于聊天对话的实现,效果如下: 智能客服(输入文本,返回引擎处理后的文本结果) 语音合成 ...

  5. 打造一个window桌面应用：在线聊天对话机器人

    大家好,我是辰哥~~~ 本文目标:打造一个window桌面应用:在线聊天对话机器人. 今天辰哥教大家做一个在线聊天对话机器人桌面应用,已经打包成exe可执行文件,读者可以直接拿来使用, 先上演示图 聊 ...

  6. php大力力 [039节] 修改一下后台项目，同时启用印象笔记，要做的事情todo列表，记录在印象笔记，速度快一些

    php大力力 [039节]  修改一下后台项目,同时启用印象笔记,要做的事情todo列表,记录在印象笔记,速度快一些

  7. 《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  8. socket.io+angular.js+express.js做个聊天应用(三)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/www19940501a/article/details/27590611 接着前面博客文章socke ...

  9. React开发实时聊天招聘工具 -第一章

    第一章 课程道学 6个页面 弱化css Antd-mobile作为组件库 Redux 状态管理 React-Router 路由 Axios异步请求 后端Express框架 Socket.io 数据库: ...

随机推荐

  1. fopen,fread和fwrite

    在最近的编程练习和写东西的过程中,常常用到了fopen和fread两个函数来读取本地文件.之前使用这两个函数时,一直没有出现过什么问题.也是因为没有出现问题,对这两个函数的用法的一些细节没有很了解,所 ...

  2. ACM-ICPC LA 4329 Ping pong（树状数组）

    https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...

  3. 拼接LINQ动态表达式

    using System; using System.Linq; using System.Linq.Expressions; public static class LinqBuilder { // ...

  4. Android touch 事件传递机制

    前言: (1)在自定义view的时候经常会遇到事件拦截处理,比如在侧滑菜单的时候,我们希望在侧滑菜单里面有listview控件,但是我们希望既能左右滑动又能上下滑动,这个时候就需要对触摸的touch事 ...

  5. html a标签包含a标签，浏览器的行为处理

    a标签包含a标签 浏览器可能是为了避免a的转跳重复,所以禁止了a标签包含a标签,如何你的代码中有a标签包含a标签,那么浏览器将会重新编码外层a标签,取外层a标签与内层a标签的差集,加上外层a标签,并把 ...

  6. C++预定义字符函数

    利用 get 成员函数可读取文件中的一切字符,包括空白字符.文件结尾.用 >> 读取文件,会自动忽略空白字符(空格.换行符.制表符) C++ 预定义的字符函数(均在 cctype 库中定义 ...

  7. 修改后的CopyFile类

    这是修改后的CopyFile类,前面那个类有局限性,它不能复制大文件 这是我第一次写成一个能够实际应用的类,感谢博主们的无私奉献,感谢SeayXu老师的提点 但是这个类也并不是完美无缺,它复制文件没有 ...

  8. 我的第一个hadoop程序

    利用virtualbox+win的开发环境搭设好咯,在win下做开发,利用linux跑hadoop,伪分布式的. 上第一个程序 package org.apache.hadoop.examples; ...

  9. 上海有线通下载exe会302转发请求

    起因: 做的软件用的clickonce,在公网的clickonce下载exe时一直报错,在vpn环境下没问题.错误提示如下: + HTTP redirect is not allowed for ap ...

  10. SSH框架整合项目（一）——搭建平台和引入依赖

    前言:这个项目是我的第一个实验性项目,最初的立意是制作一个个性化的BBS.由于BBS能够综合大部分功能,因此作为练手的项目来说再好不过.从写第一行代码到完成测试版大概历时2周.中间遇到了不少以前在学习 ...