reactjs - 在 Reactjs 中动态生成导航栏？

Question

我想知道根据用户在网站上的位置更改导航栏的最佳方法是什么。

我想我的导航栏会有 3 种不同的状态。

1. 未登录用户
2. 登录用户
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”的东西重新渲染。

Answer 1

这是一个宽泛的答案，因为您问的是一个宽泛的问题。您似乎在构建过多之前寻求指导，因此此处无法提供准确的答案。

基本上，我会使用状态来确定导航栏上显示的外观和选项，而不是路线。但是，您应该根据需要访问路线和状态。

在你的应用程序状态下，你应该跟踪用户是否登录，以及他们正在操作的角色类型。我不知道 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。