react聊天组件：用antd和react-chat-element组装的聊天列表

效果图：
在这里插入图片描述

安装库

用到了antd design和github上的一个库：react-chat-element
（1）antd design：
安装：yarn add antd
修改 src/App.css，在文件顶部引入 antd/dist/antd.css

@import '~antd/dist/antd.css';

即可使用antd的组件
（2）react-chat-element：
github网址为：Detaysoft/react-chat-elements

安装：npm install react-chat-elements --save即可

代码和基本说明

import React, {createRef} from "react";
import {ChatList, MessageList} from 'react-chat-elements'
import 'react-chat-elements/dist/main.css';
import {Button, Row, Col, Divider, Input} from "antd";const {TextArea} = Input;class ChatWidget extends React.Component {constructor(props) {super(props);this.state = {user: null,msgDataList: [],sendMsg: "",}this.clickButton = this.clickButton.bind(this);this.messagesEnd = createRef();}componentDidMount() {let list = [];for (let i = 0; i < 10; ++i)list.push({position: 'left',type: 'text',text: 'hello' + i,date: new Date(),});this.setState({msgDataList: list});this.setState({user: this.props.user});}componentWillReceiveProps(nextProps, nextContext) {this.setState({user: nextProps.user});}clickButton() {let list = this.state.msgDataList;list.push({position: 'right',type: 'text',text: this.state.sendMsg,date: new Date(),})this.setState({msgDataList: list});this.setState({sendMsg: ""});}componentDidUpdate(prevProps, prevState, snapshot) {this.messagesEnd.scrollTop = this.messagesEnd.scrollHeight;}render() {return (<Col style={{width: 700,height: 600,display: 'inline-block',borderRight: "3px solid",borderTop: "3px solid",borderBottom: "3px solid",}}><Row><Col style={{width: 700,height: 40,textAlign: "center",verticalAlign: "middle",fontSize: 20}}>{this.state.user == null ? "" : this.state.user.title}</Col></Row><Row><div style={{width: 700,height: 420,textAlign: "center",verticalAlign: "middle",fontSize: 20,overflow: "auto",backgroundColor: "\t#C0C0C0"}}ref={(el) => {this.messagesEnd = el;}}><MessageListclassName='message-list'dataSource={this.state.msgDataList}/></div></Row><Row><Col style={{width: 700,textAlign: "center",verticalAlign: "middle",fontSize: 20}}><TextArea rows={4} onChange={e => {this.setState({sendMsg: e.target.value});}}ref={el => (this.inputRef = el)}value={this.state.sendMsg}/><Button type="primary" onClick={this.clickButton}>发送</Button></Col></Row></Col>);}
}class PrivateChatView extends React.Component {constructor(props) {super(props);this.state = {userList: [],clickUser: null,}}componentDidMount() {let list = [];for (let i = 0; i < 14; ++i)list.push({avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',alt: 'Reactjs',title: '用户' + i,subtitle: 'What are you doing?',date: new Date(),unread: Math.floor(Math.random() * 10),});this.setState({userList: list});this.setState({clickUser: list[0]});}render() {return (<div><Divider orientation="left" style={{color: '#333', fontWeight: 'normal'}}>私信列表</Divider><Row><Col style={{width: 400,height: 600,display: 'inline-block',border: "3px solid",overflow:"auto"}}><ChatListclassName='chat-list'onClick={e => this.setState({clickUser: e})}dataSource={this.state.userList}/></Col>{this.state.userList.length == 0 ? <div>无私信</div> : <ChatWidget user={this.state.clickUser}/>}</Row></div>);}
}export default PrivateChatView;