我想知道根据用户在网站上的位置更改导航栏的最佳方法是什么。
我想我的导航栏会有 3 种不同的状态。
- 未登录用户
- 登录用户
- 管理区
我正在使用 Mobx、Reactjs 和 ReactRouter
我会有这样的组件
@inject("routingStore")
@observer
export default class TestComponent extends Component {
render() {
return (
<div>test routing</div>
);
}
}
我正在考虑将我的 Nav 变成一个组件,然后检查 url 是否类似于
localhost:8080/test-area
(可能意味着他们没有登录或登录,将做进一步检查以查看是否设置了带有身份验证 token 的 session 存储)
或
locahost:8080/admin/test
我会以某种方式检查“/admin”并加载正确的导航。
但是我不确定如何让这些东西重新渲染,因为我不确定在“链接”之间切换是否会导致任何正在检查“react-router”的东西重新渲染。
最佳答案
这是一个宽泛的答案,因为您问的是一个宽泛的问题。您似乎在构建过多之前寻求指导,因此此处无法提供准确的答案。
基本上,我会使用状态来确定导航栏上显示的外观和选项,而不是路线。但是,您应该根据需要访问路线和状态。
在你的应用程序状态下,你应该跟踪用户是否登录,以及他们正在操作的角色类型。我不知道 mobx 是如何工作的,但我知道我会如何使用 redux 来做到这一点.
如果你正确地使用了 react、react-router 和你的状态,你就不必担心重新渲染任何东西。如果状态或 Prop 发生变化,React 将重新渲染。
因此,基于状态,包括导航栏组件的主组件或顶级组件可以确定是否显示导航栏,导航栏组件本身也可以访问状态并确定显示导航栏的哪些部分。
所以在你的应用程序的某个地方,使用 mobx
你将创建一个当前用户状态对象(我认为,这是一个猜测,因为我没有使用那个包来存储状态,尽管如此我坚持):
import { observable } from "mobx"
class CurrentUser {
id = Math.random();
@observable isAuthenticated = false;
@observable role = '';
}
然后你会一直使用它,像这样:
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import NavBar from '../NavBar' // your NavBar component
import {observer} from 'mobx-react';
@observer
class App extends Component {
render() {
return <div>
{this.props.store.isAuthenticated &&
<NavBar />}
</div>
}
}
const store = new CurrentUser();
ReactDOM.render(<App store={store} />, document.getElementById('mount'));
以类似的方式,您可以使用 role
在您的组件中设置条件,您可以对其他组件执行相同的操作,例如 NavBar。
关于reactjs - 在 Reactjs 中动态生成导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51351007/