根据当前页面动态加载AppBar的Toolbar - React Admin
Load Toolbar of AppBar dynamically based on current page - React Admin
我是 React 世界的新手,正在努力寻找一种方法将 IconButton 加载到 AppBar 的工具栏(来自 Material UI)。
假设我在 pageA 上并且喜欢有两个特定于 pageA 的 IconButtons,当我到达 pageB 时,我喜欢加载特定于 pageB 的工具栏按钮。
我创建了一个 codesandbox 项目,以方便任何人提供帮助。
https://codesandbox.io/s/material-ui--react-admin-1qc5x
感谢任何帮助、指导等
您可以通过多种方式实现:
Redux:您可以使用 react-redux
并创建一个 store
,您可以在其中存储您的 current_page
值(SPA 情况下的最佳实践)并访问
中的页面值
static getDerivedStateFromProps(props, state){
//your code here
}
- 基于路线(
react-router
)
- [我做了什么] 基于
URL params
就像你正在做的那样 history.push
所以从你的 URL 中提取参数会更容易,并基于它呈现你的工具栏图标。
我的代码参考:https://codesandbox.io/s/material-ui--react-admin-nxh7m
我是 React 世界的新手,正在努力寻找一种方法将 IconButton 加载到 AppBar 的工具栏(来自 Material UI)。
假设我在 pageA 上并且喜欢有两个特定于 pageA 的 IconButtons,当我到达 pageB 时,我喜欢加载特定于 pageB 的工具栏按钮。
我创建了一个 codesandbox 项目,以方便任何人提供帮助。 https://codesandbox.io/s/material-ui--react-admin-1qc5x
感谢任何帮助、指导等
您可以通过多种方式实现:
Redux:您可以使用
中的页面值react-redux
并创建一个store
,您可以在其中存储您的current_page
值(SPA 情况下的最佳实践)并访问static getDerivedStateFromProps(props, state){ //your code here }
- 基于路线(
react-router
) - [我做了什么] 基于
URL params
就像你正在做的那样history.push
所以从你的 URL 中提取参数会更容易,并基于它呈现你的工具栏图标。
我的代码参考:https://codesandbox.io/s/material-ui--react-admin-nxh7m