antd的Calendar日历自定义单元格数据刷新不及时

最新推荐文章于 2024-08-02 18:39:25 发布

nba136667854

最新推荐文章于 2024-08-02 18:39:25 发布

阅读量2.2k

点赞数

分类专栏： react calendar antd-design 文章标签： react.js javascript 前端 es6 webpack

本文链接：https://blog.csdn.net/nba136667854/article/details/121277359

版权

react 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

calendar

1 篇文章 0 订阅

订阅专栏

antd-design

1 篇文章 0 订阅

订阅专栏

本文档介绍了一个React应用中遇到的问题，即在日历组件中显示日志状态时，由于dateCellRender方法的无状态特性导致数据更新后未能及时刷新。通过将dateCellRender转换为有状态组件并监听数据变化，实现了日志状态的实时更新。示例代码展示了如何在日历单元格中渲染带有日志状态的徽章，并在日期选择改变时更新组件。

摘要由CSDN通过智能技术生成

项目场景：

用日历显示日志状态

问题描述：

想重新选择年月查看日志状态，查到数据了，但是 dateCellRender 方法已经执行完毕了，导致刷新不及时，点击一下日历面板才能显示

原因分析：

官方给的文档每个日期渲染的单元格数据是无状态的，可以把dateCellRender函数设置成一个有状态的组件，当数据变化时，在重新render

下面是一个简单的示例代码

import React, { PureComponent } from 'react';
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { Button, Row, Col, Card, Form, Divider, Table, Tree, message, Modal, Upload, Calendar, Badge } from 'antd';
import { Input, DatePicker, Select, Switch, Radio, Checkbox, Cascader, InputNumber } from 'antd';

class DataCellRender extends PureComponent {
    constructor(props) {
        super(props)

        this.state = {
            component: <div></div>
        }

        this.reload = this.reload.bind(this)
    }

    componentDidMount() {
        this.reload()
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.dataSource !== this.props.dataSource) {
            this.reload(nextProps.dataSource)
        }
    }

    reload(dataSource = this.props.dataSource) {
        let component = <div></div>
        let currentDate = moment(this.props.value).format('YYYY-MM-DD')
       //  currentDate 是每一个日期单元格触发dateCellRender 返回的参数（当前单元格日期）  具体业务可以结合当前选择的日期value和自定义数据datacouce 来组合
        
        component = <ul className="events">
            <li>
                <Badge color="#ff0000" text={dataSource} />
            </li>
        </ul>

        this.setState({
            component,
        })
    }

    render() {
        return this.state.component
    }
}

@withRouter
@connect(
    state => ({
    })
)
class Panel extends React.PureComponent {

    constructor(props) {
        super(props);

        this.state = {
            dataSource: moment().format("yyyy-MM-DD"),
        }
        this.onPanelChange = this.onPanelChange.bind(this)
    }

    componentDidMount() {
    }

    onPanelChange(e) { //选择日期的回调函数
        let date = e['_d'] //日期的moment对象
        this.setState({
            dataSource: moment(date).format("yyyy-MM-DD")
        })
    }

    render() {
        return (
            <Card style={{ padding: 10 }}>
                <Calendar dateCellRender={value => <DataCellRender value={value} dataSource={this.state.dataSource} />} onPanelChange={this.onPanelChange} />
            </Card>
        )
    }
}

export default Panel