Question

我有一个带有属性AppBar的React MaterialUI title组件，我根据window.location.pathname返回的值进行更改。因此，当页面/网址发生变化时，标题会随之改变。看起来像下面这样：

<AppBar
title={this.renderTitle()}
/>

renderTitle() {
if (window.location.pathname === '/home'
 return 'home';
} else if (window.location.pathname === '/login'
return 'login';
}

我遇到的问题是，如果其他组件（而不是renderTitle()）导致页面/网址更改，AppBar将无法执行。

E.g。页面上另一个单独的React组件触发要更改的页面，我希望使用触发器renderTitle()，但它不会...因此title属性永远不会更新。因此，如果我从/home导航到/login，则会发生以下情况：

路径名为/home
用户按下一个按钮，该按钮运行一个函数submit()，用于更改页面w / react-router
renderTitle()正在运行，但window.location.pathname仍在返回上一页
submit()将页面更改为/login
window.location.pathname现已正确设置为/login，但由于renderTitle()已经投放已经太晚了

感谢任何帮助，谢谢

Answer 1

最好的方法是使用react-document-title库。来自文档：

react-document-title提供了一种在单页面应用中指定document.title的声明方式。该组件也可以在服务器端使用。

Answer 2

如果呈现AppBar的组件是实际路径，则只需从路由器注入的道具中读取路径名即可。

<Router>
   <Route path="/" component={App}>
     <Route path="about" component={About} />
     <Route path="inbox" component={Inbox}>
       <Route path="messages/:id" component={Message} />
     </Route>
   </Route>
 </Router>

例如，在App，About，Inbox和Message中，您可以访问路由器道具。而且你也可以把道具传给他们的孩子。

render() {
  return (
   <AppBar
     title={this.renderTitle(this.props.location.pathname)}
   />
  );
}

在你的函数中只需使用参数返回正确的结果。现在因为您正在使用道具，您的组件会在更改时自动更新。

在单独的组件中更新React组件的属性

2 个答案: