使用react做的聊天对话列表
刚刚接触react 可能写的地方有错误或者不完善的地方欢迎大家给指正
下面开始正题
首先分析页面基于react的特性--把页面中所有显示内容看做模块加载
- 本页面可以看做一个大的模块，我们暂且命名为commentbox
- 评论列表是由一条条的评论内容组成，所以把评论内容comment，单独作为一个模块，然后放在评论列表的模块里commentlist
- 底部的输入框作为一个输入模块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做的聊天对话列表的更多相关文章
- Android高级控件（五）——如何打造一个企业级应用对话列表,以QQ，微信为例
Android高级控件(五)--如何打造一个企业级应用对话列表,以QQ,微信为例 看标题这么高大上,实际上,还是运用我么拿到listview去扩展,我们讲什么呢,就是研究一下QQ,微信的这种对话列表, ...
- 4-13 Webpacker-React.js; 用React做一个下拉表格的功能: <详解>
Rails5.1增加了Webpacker: Webpacker essentially is the decisions made by the Rails team and bundled up i ...
- 用Swoole+React 实现的聊天室
前后端分离的项目,使用 Swoole+React 实现的聊天室,整个项目的框架结构可以进行参考,前端 react+react-redux+react-router+react-ant 等等,后台使用 ...
- Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互
引言 在与实现了语音合成.语义分析.机器翻译等算法的后端交互时,页面可以设计成更为人性化.亲切的方式.我们采用类似于聊天对话的实现,效果如下: 智能客服(输入文本,返回引擎处理后的文本结果) 语音合成 ...
- 打造一个window桌面应用：在线聊天对话机器人
大家好,我是辰哥~~~ 本文目标:打造一个window桌面应用:在线聊天对话机器人. 今天辰哥教大家做一个在线聊天对话机器人桌面应用,已经打包成exe可执行文件,读者可以直接拿来使用, 先上演示图 聊 ...
- php大力力 [039节] 修改一下后台项目，同时启用印象笔记，要做的事情todo列表，记录在印象笔记，速度快一些
php大力力 [039节] 修改一下后台项目,同时启用印象笔记,要做的事情todo列表,记录在印象笔记,速度快一些
- 《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- socket.io+angular.js+express.js做个聊天应用(三)
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/www19940501a/article/details/27590611 接着前面博客文章socke ...
- React开发实时聊天招聘工具 -第一章
第一章 课程道学 6个页面 弱化css Antd-mobile作为组件库 Redux 状态管理 React-Router 路由 Axios异步请求 后端Express框架 Socket.io 数据库: ...
随机推荐
- swift 判断字符串长度
projectName.lengthOfBytes(using: String.Encoding(rawValue: String.Encoding.utf16.rawValue)) > 0
- [总结] I/O输入，输出
I/O输入,输出第一:先判断到底是输入还是输出,站在程序的立场第二:判断是传递字节,还是字符,决定管道粗细,字节流是最基本的数据输出管道.字符类型管道专门用来传送文本数据.Java流的四大父类:1.字 ...
- 2.4 C#的变量
在C#中,不仅有常量,还有变量,而且最常用的还是变量.下面是变量的知识. C#的变量有3个步骤:声明.赋值.使用. 变量声明的方法:数据类型 变量名; 变量赋值的方法:变量名=变量的值: 下面是这3个 ...
- LINQ使用细节之.AsEnumerable()和.ToList()的区别
先看看下面的代码,用了 .AsEnumerable(): 1 var query = (from a in db.Table2 where a = SomeCondition3 select a.So ...
- 七牛整合php上传从微信下载接口下载下来的文件
因为ios系统直接读取不了MP3格式的文件,所以从微信接口下载下来的MP3格式音频上传到七牛后要转码. Sample code: public function doMobileUploadT ...
- mybatis，Spring等工具对xml文件正确性的验证
我们知道mybatis或者spring都是使用xml文件作为配置文件,配置文件的格式都是定义在叫做.dtd或者.xsd文件中的,当工具在解析用户自己定义的xml文件的时候,如何才能知道用户自定义的文件 ...
- selenium测试（Java）--多窗口切换（十三）
selenium测试(Java)--多窗口切换(十三) 如果遇到点击按钮或链接后出现新窗口的情况,就需要使用窗口切换的方法. 本例中就是先打开百度搜索界面,然后利用js打开一个百度新闻界面,然后通过s ...
- 5. 网络配置与FTP服务笔记
IP地址: Ipv4 2*32 Ipv6 tcp 网络通讯协议 udp 用户数据报协议 常见网络端口: 20 21 ftp服务 文件共享 22 ...
- angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
- OC-《购票系统》
来个命令行的购票系统 --1-- 需求分析 1.1 分析 1.2 功能分析 1.3 流程分析 --2-- 原型展示 2.1 界面原型 --3-- 系统设计 3.1 类设计 3.2 框架模块设计 --4 ...