react实现消息显示器_React

来源:脚本之家  责任编辑:小易  

本文实例为大家分享了react实现消息显示器的具体代码,供大家参考,具体内容如下

效果

代码实现

完整代码:

import React from 'react';
import styles from './styles.less';
import badgeImg from '@/assets/leftmenu/badgeImg.png';
import router from 'umi/router';
import { connect } from 'dva';
import { Popover, Badge, Button, Modal } from 'antd';

function mapStateToProps({ InformationModel }) {
? ? return {
? ? ? ? InformationModel: InformationModel,
? ? };
}
@connect(mapStateToProps)
class Information extends React.Component {
? ? constructor(props) {
? ? ? ? super(props);
? ? ? ? this.state = {
? ? ? ? ? ? visible: false,
? ? ? ? ? ? unreadList: [],
? ? ? ? ? ? infoTitle: '',
? ? ? ? ? ? infoContent:'',

? ? ? ? };
? ? }
? ? //渲染前调用
? ? componentWillMount() { }

? ? //渲染后调用
? ? componentDidMount() {
? ? ? ? this.getunreadDatas();
? ? }
? ? //调用接口获取未读数据
? ? getunreadDatas() {
? ? ? ? let { dispatch } = this.props;
? ? ? ? let userid = localStorage.getItem('userid');
? ? ? ? let params = {
? ? ? ? ? ? id: userid,
? ? ? ? ? ? pageNum: 0,
? ? ? ? ? ? pageSize: 0
? ? ? ? }
? ? ? ? dispatch({ type: 'InformationModel/getunreadData', payload: { params: params, callback: this.unreadCallback.bind(this) } });
? ? }
? ? //接口回调方法
? ? unreadCallback(e) {
? ? ? ? this.setState({
? ? ? ? ? ? unreadList:e
? ? ? ? })
? ? }
? ? //查看详情
? ? showInfo(e) {
? ? ? ? let { dispatch } = this.props;
? ? ? ? let userid = localStorage.getItem('userid');
? ? ? ? let params = {
? ? ? ? ? ? id:e.id,
? ? ? ? ? ? userId:userid,
? ? ? ? }
? ? ? ? //调用接口标记已读
? ? ? ? dispatch({ type: 'InformationModel/getreadData', payload: { params: params, callback: this.readCallback.bind(this) } });
? ? ? ? this.setState({
? ? ? ? ? ? infoTitle:e.name,
? ? ? ? ? ? infoContent:e.text
? ? ? ? })
? ? }
? ? //标记接口回调函数
? ? readCallback(e){
? ? ? ? this.setState({
? ? ? ? ? ? visible: true,
? ? ? ? });
? ? ? ? //刷新列表
? ? ? ? this.getunreadDatas();
? ? }
? ? //显示全部
? ? showAllInfo(){
? ? ? ? router.push({
? ? ? ? ? ? pathname: `/cs/InformationMoreList`,
? ? ? ? ? ? query: {
? ? ? ? ? ? },
? ? ? ? });
? ? }
? ? //弹框确认按钮
? ? handleOk = e => {
? ? ? ? console.log(e);
? ? ? ? this.setState({
? ? ? ? ? ? visible: false,
? ? ? ? });
? ? };
? ? //弹框取消按钮
? ? handleCancel = e => {
? ? ? ? console.log(e);
? ? ? ? this.setState({
? ? ? ? ? ? visible: false,
? ? ? ? });
? ? };

? ? render() {

? ? ? ? const content = (
? ? ? ? ? ? <div className={styles.infoTabs}>
? ? ? ? ? ? ? ? <div className={styles.infoList}>
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? this.state.unreadList.map((item,index)=>{
? ? ? ? ? ? ? ? ? ? ? ? ? ? return <div className={styles.infoRow} onClick={this.showInfo.bind(this,item)}>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div className={styles.infoTitle}>{item.name}</div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div className={styles.infoContent}>{item.text}</div>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div className={styles.showAll}>
? ? ? ? ? ? ? ? ? ? <Button onClick={this.showAllInfo.bind(this)} className={styles.showAllBtn}>查看全部</Button>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? );

? ? ? ? return (
? ? ? ? ? ? <React.Fragment>
? ? ? ? ? ? ? ? <div className={styles.allBox}>
? ? ? ? ? ? ? ? ? ? <Popover onMouseEnter={this.getunreadDatas.bind(this)} content={content} title="消息">
? ? ? ? ? ? ? ? ? ? ? ? <Badge count={this.state.unreadList.length} showZero>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <img src={badgeImg}></img>
? ? ? ? ? ? ? ? ? ? ? ? </Badge>
? ? ? ? ? ? ? ? ? ? </Popover>
? ? ? ? ? ? ? ? ? ? <Modal
? ? ? ? ? ? ? ? ? ? ? ? title={this.state.infoTitle}
? ? ? ? ? ? ? ? ? ? ? ? visible={this.state.visible}
? ? ? ? ? ? ? ? ? ? ? ? onOk={this.handleOk}
? ? ? ? ? ? ? ? ? ? ? ? onCancel={this.handleCancel}
? ? ? ? ? ? ? ? ? ? ? ? footer={null}
? ? ? ? ? ? ? ? ? ? >
? ? ? ? ? ? ? ? ? ? ? ? <p>{this.state.infoContent}</p>
? ? ? ? ? ? ? ? ? ? </Modal>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </React.Fragment>
? ? ? ? );
? ? }
}
export default Information;


  • 本文相关:
  • 详解react-router中url参数改变页面不刷新的解决办法
  • react实现点击选中的li高亮的示例代码
  • 用react-redux实现react组件之间数据共享的方法
  • react进阶教程之异常处理机制error?boundaries
  • react实时预览react-live源码解析
  • react手写一个手风琴组件示例
  • 提高react界面性能的十个技巧
  • vite+react+typescript手撸todolist的项目实践
  • 如何将你的angularjs1.x应用迁移至react的方法
  • 深入研究react中setstate源码
  • 如何用react实现两次密码一致才通过
  • 如何用 React 实现滚动动画
  • 怎么用react实现网站页面类似swiper的效果
  • 如何评价 React 实现的前端 UI 库 material-ui
  • 怎么用react实现网站页面类似swiper的效果
  • 如何评价 React 实现的前端 UI 库 material-ui
  • 怎么用react实现网站页面类似swiper的效果
  • 使用React实现轮播效果组件示例代码
  • 用react-redux实现react组件之间数据共享的方法
  • React怎样实现下拉刷新,上拉加载更多
  • 用react怎么实现触摸五星评价
  • 怎样实现react的热加载
  • react如何实现ctrl+f的功能
  • react怎么实现点击空白关闭
  • 怎么实现react native中listview的item的选中状态
  • 哪些app是用reactnative实现的
  • 怎么实现react native中listview的item的选中状态
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.jsreact其它首页javascriptjavascript类库react-native使用leanclound消息推送的方法react native 通告消息竖向轮播组件的封装详解react-router中url参数改变页面不刷新的解决办法react实现点击选中的li高亮的示例代码用react-redux实现react组件之间数据共享的方法react进阶教程之异常处理机制error?boundariesreact实时预览react-live源码解析react手写一个手风琴组件示例提高react界面性能的十个技巧vite+react+typescript手撸todolist的项目实践如何将你的angularjs1.x应用迁移至react的方法深入研究react中setstate源码详解react中传入组件的props改变时更新组件的几种实现vscode配置react开发环境的步骤react-redux中connect的装饰器用法@connreactnative 之flatlist使用及踩坑封装总结详解react native开源时间日期选择器组件(reacreact native实现简单的登录功能(推荐)react-router browserhistory刷新页reactnative之键盘keyboard的弹出与消失示例详解react-router中url参数改变页面不刷新的解决详解各版本react路由的跳转的方法react 高阶组件hoc用法归纳react以create-react-app为基础创建项目vscode配置react开发环境的步骤react项目经验总结及遇到的坑关于react+antd样式不生效问题的解决方式详解使用react.memo()来优化函数组件的性能详解react 在服务端渲染的实现react-native桥接android原生开发详解react hooks与setinterval的踩坑问题小结react实现页面水印效果的全过程
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved