在 Reactjs 中动态生成导航栏？

Question

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

我想我的导航栏会有 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（可能意味着他们没有登录或登录，将做进一步检查以查看是否设置了带有身份验证令牌的会话存储）

或

locahost:8080/admin/test

我会以某种方式检查“/admin”并加载正确的导航。

但是我不确定如何让这些东西重新渲染，因为我不确定在 "links" 之间切换是否会导致任何正在检查 "react-router" 的东西重新渲染。

Answer 1

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

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

在您的应用程序状态下，您应该跟踪用户是否登录，以及他们正在操作的角色类型。我不知道 mobx 是如何工作的，但我知道我会怎么做与减少。

如果你正确地使用了 react、react-router 和你的状态，你就不必担心重新渲染任何东西。如果状态或道具发生变化，React 将重新渲染。

所以，基于state，包含navbar组件的主组件或顶级组件可以决定是否显示navbar，而navbar组件本身也可以访问state并决定显示navbar的哪些部分.

所以在你的应用程序的某个地方，使用 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 中动态生成导航栏？

Dynamically Generate Nav Bar in Reactjs?

reactjs

react-router

mobx