时间戳

首页 > 解决方案 > 如何在 AppBar 上设置配置显示/隐藏刷新按钮

react-admin - 如何在 AppBar 上设置配置显示/隐藏刷新按钮

问题描述

点击查看图片

按钮刷新AppBar不是在页面仪表板上刷新，因为我只使用组件Card但使用组件List或在页面上工作Datagrid，所以我想配置显示/隐藏刷新按钮AppBar或如何修复它适用于页面不使用组件List或Datagrid。

对不起，我英语不强。

标签： react-admin

解决方案

您必须从 react-admin 状态中获取一些数据才能使其工作。实际上，刷新按钮只是触发了refreshView更新state.admin.ui.viewVersionreact-admin redux 状态键的操作。这把钥匙是一个简单的计数器。在内部，我们使用此计数器来检查是否必须更新某些组件数据。这是一个连接的简单示例，Dashboard它可以在刷新时执行操作：

import React, { Component } from "react";
import { connect } from "react-redux";

class Dashboard extends Component {
  componentDidMount() {
    this.doOnMountAndWhenRefreshed();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.views !== this.props.views) {
      this.doOnMountAndWhenRefreshed();
    }
  }

  doOnMountAndWhenRefreshed = () => {
    // This is where you do update your component:
    // - Make API requests
    // - Fetch data from the react-admin store, etc.
  };

  render() {
    const { views } = this.props;
    return <div>Refreshed {views} times.</div>;
  }
}

const mapStateToProps = state => ({ views: state.admin.ui.viewVersion });

export default connect(
  mapStateToProps,
  {}
)(Dashboard);

你可以看到它在这个代码框里工作

编辑更新版本的 react-admin

import { useVersion } from 'react-admin';

const Dashboard = () => {
    const version = useVersion();
    return <div>Refreshed {version} times.</div>;
}

推荐阅读