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 = (
            

                

                    {
                        this.state.unreadList.map((item,index)=>{
                            return 

                            
{item.name}
                            
{item.text}
                        
                        })
                    }
                    
                
                

                    查看全部
                
            
        );

        return (
            
                

                    
                        
                            
                        
                    
                    
                        
{this.state.infoContent}
                    
                
            
        );
    }
}
export default Information;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。