时间戳

首页 > 解决方案 > 根据当前页面动态加载 AppBar 的工具栏 - React Admin

javascript - 根据当前页面动态加载 AppBar 的工具栏 - React Admin

问题描述

我对 React 世界比较陌生，并且努力寻找一种将 IconButtons 加载到 AppBar 的工具栏的方法（来自 Material UI）。

假设我在 pageA 上并且喜欢有两个特定于 pageA 的 IconButtons，当我到达 pageB 时，我喜欢加载特定于 pageB 的工具栏按钮。

我创建了一个代码沙盒项目，以使任何人都更容易提供帮助。 https://codesandbox.io/s/material-ui--react-admin-1qc5x

我感谢任何帮助，指导等。

标签： javascriptreactjsmaterial-uireact-admin

解决方案

您可以通过多种方式实现这一目标：

  1. Redux：您可以使用react-redux并创建一个store可以存储您的current_page值的位置（SPA 的最佳实践）并访问页面值

    static getDerivedStateFromProps(props, state){ //your code here }

  2. 基于 Route( react-router)
  3. [我所做的] 基于URL params你正在做的事情history.push，从你的 URL 中提取参数并基于它呈现你的工具栏图标会更容易。

我的代码参考：https ://codesandbox.io/s/material-ui--react-admin-nxh7m

推荐阅读