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（可能表示他们尚未登录或登录，将做进一步检查以查看是否设置了具有auth令牌的会话存储）

或

locahost:8080/admin/test

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

但是我不确定如何重新渲染这些内容，因为不确定在“链接”之间切换是否会导致检查“反应路由器”内容的所有内容重新渲染。

Answer 1

这是一个广泛的答案，因为您提出了一个广泛的问题。您似乎在构建过多版本之前就要求提供指导，因此此处不可能给出确切的答案。

我很容易使用state来确定导航栏中显示的外观和选项，而不是route。但是，您应该根据需要访问路由和状态。

在您的应用程序状态下，您应该跟踪用户是否已登录以及他们所扮演的角色的类型。我不知道mobx的工作原理，尽管我知道如何使用redux进行操作。。

如果正确使用react，react-router和状态，则不必担心重新渲染任何内容。如果状态或道具发生变化，React将重新渲染。

因此，基于状态，包括导航栏组件的主要或顶层组件可以确定是否显示导航栏，并且导航栏组件本身也可以访问状态并确定显示导航栏的哪些部分。 / p>

因此，在您的应用中的某个位置，您将使用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中动态生成导航栏？

1 个答案: