如何动态更改“标题"的“应用程序"，基于登录信息(即登录成功或注销后)? [英] How to dynamically change the "title" of "app", based on login info (i.e. after login succeeds or logout)?

问题描述

我有这个代码，请看title道具:

const App = () =>(<管理员主题={主题}customRoutes={customRoutes}菜单={菜单}dataProvider={loopbackRestClient(window.apiUrl)}authProvider={authClient()}仪表板={仪表板}语言环境=en"i18nProvider={i18nProvider}标题={`仪表板 - ${window.accountData ?window.accountData.accommodation.name : ''}`}>//这里有更多代码...

这会在登录成功时尝试更改呈现的 title，因此我们从那里获得不同的 accommodation.name 值.

我预计组件可能会使用此事件重新呈现，因为登录会影响 REDUX 状态，因此 window 变量(登录后更改)应该呈现不同的标题.

它没有用.

我们如何以正确的方式(react-redux 方式)做到这一点?

解决方案

您可以创建一个自定义和连接的 Title 组件，并将其作为 title 道具传递.

https://codesandbox.io/s/1072ry6rl7

请注意，我的自定义 Title 组件必须支持 className 属性.这是material-ui 要求.

I have this code, please see the title prop:

const App = () => (
  <Admin
    theme={theme}
    customRoutes={customRoutes}
    menu={Menu}
    dataProvider={loopbackRestClient(window.apiUrl)}
    authProvider={authClient()}
    dashboard={Dashboard}
    locale="en"
    i18nProvider={i18nProvider}
    title={`Dashboard - ${window.accountData ? window.accountData.accommodation.name : ''}`}
  >
  // more code here...

This tries to change the rendered title when login succeeds and therefore we get different accommodation.name value from there.

I was expecting that the component may re-render with this event, since login affects the REDUX state, so the window variable (which changed after login) should render a different title.

It did not work.

How may we do it the proper way (react-redux way)?

解决方案

You can make a custom and connected Title component and pass it as the title prop.

https://codesandbox.io/s/1072ry6rl7

Note that my custom Title component has to support a className prop. This is a material-ui requirement.

这篇关于如何动态更改“标题"的“应用程序"，基于登录信息(即登录成功或注销后)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！