react实现聊天界面_使用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文件
react
System.import('app/main');
然后在main.js中
'use strict';
import 'semantic-ui/semantic.min.css!';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
你好
,
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(
评论
)
}
}
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(
,
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(
评论
)
}
}
export {CommentBox as default};
comment.js
'use strict';
import React from "react";
class Comment extends React.Component{
render(){
return(
{this.props.author} //取得json数组中的值,props传入的为上级state的值
{this.props.date}
)
}
}
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(
添加评论
)
}
}
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.text}
);
});
return(
{commentNodes}
)
}
}
export {CommentList as default};
react实现聊天界面_使用react做的聊天对话列表相关推荐
- java sdk 聊天机器人_给女朋友做个聊天机器人,这样就能安心写代码了
这是第 404 次女友因为我没有及时回微信而和我生气了 惹祸的是我,受伤的确是钱包-- 但是,我并不后悔 那一局王者荣耀,因为没有回微信,我完成了五杀 carry 全场 那一局刺激战场,因为没有回微信 ...
- react 面试题 高级_常见 React 面试题
(给前端大全加星标,提升前端技能) 作者:小胡 https://github.com/nanhupatar/FEGuide/blob/master/框架/react.md React 中 keys 的 ...
- react 面试题 高级_常见react面试题汇总(适合中级前端)
转载自<原文> React 中 keys 的作用是什么? Keys 是 React 用于追踪哪些列表中元素被修改.被添加或者被移除的辅助标识. render () {return( {th ...
- 机器学习做自动聊天机器人_您不应该使用聊天机器人的3个原因
机器学习做自动聊天机器人 现在,基于云的聊天机器人几乎是旧技术. 他们已经有四年了. 和接待肯定是混合的 . 上周,几家合作机构的研究人员公布了正式的书面内容,称为``第二次对话智能挑战赛'',这是聊 ...
- react 数字转字符_深入浅出 React -- JSX
什么是 JSX JSX 是一个 JavaScript 的语法扩展.JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能 在 React 中,JSX 仅仅是 React.crea ...
- java qq聊天界面_【附源码】用Java写了一个类QQ界面聊天小项目,可在线聊天!...
原标题:[附源码]用Java写了一个类QQ界面聊天小项目,可在线聊天! 目录: 1.功能实现 2.模块划分 3.使用到知识 4.部分代码实现 5.运行例图 1.功能实现 1.修改功能(密码.昵称.个性 ...
- 防qq聊天界面纯HTML5,html5 实现qq聊天的气泡效果
教程:http://m.blog.csdn.net/blog/yhc13429826359/38778337 写的很好.自己实现的时候,由于img float:left,会脱离文档流,导致结构混乱. ...
- android聊天界面与功能,【android】聊天界面的制作-简易版实现
看完了第一行代码第三章,改进了一些基本功能,下面就听小弟一一道来: 也参考了很多别人的代码,但是总觉得一些功能可以比较轻松的实现就不绕那么多弯子,就用最基础的码代码实现一样的功能:(1)整体布局代码一 ...
- react 组件怎么公用_用 react 做一个跟随组件的 tooltip
定位的难题 你可能听说国很多关于定位型组件种类.名词:popup, tooltip, popover, overlay...(后面将统称为 overlay).这些都是定位型组件,当你需要触发显示它们的 ...
最新文章
- 如何估算各种物体的重心
- bzoj3295:[CQOI2011]动态逆序对
- leetcode笔记(一)309. Best Time to Buy and Sell Stock with Cooldown
- Android自定义属性、控件三步法
- wxWidgets:日志概述
- WebBrowser的Cookie操作(与CookieContainer的关系)
- PHP笔记——java程序员看懂PHP程序
- 04 java 基础:数据类型
- 23种设计模式之状态模式
- 狼奔代码生成器使用说明
- 射频测试系统软件,新的~~蓝牙5.0射频测试系统
- android thread 用法,我们如何在Android中使用runOnUiThread?
- 守望先锋 获取cdn配置_英特尔酷睿i5 9400F万金油配置推荐 适合吃鸡 守望先锋
- 一个移动端的在线五笔输入法
- Windows 删除系统恢复分区
- Android Studio高级使用技巧
- 读《从零开始学理财》
- STM32 定时器编码器模式时,如何理解编码器计数
- 土豆皮,蒜苗长短,胡萝卜
- 手机/网络风暴——诺基亚、谷歌、苹果交锋在即