Question

我有一个简单的React应用程序，它使用React-Router在页面之间导航。我想将特定于页面的导航项添加到全局导航栏。

为此，我将一个函数作为prop传递给每个页面组件，它可以调用它将自己选择的组件传递给导航组件。

它必须是一个组件，因为它将包含任意按钮和菜单及其相应的处理程序。

class App extends Component {
    constructor(props) {
        super(props);
        this.state={ toolbar: null };
        this.setToolBar = this.setToolBar.bind(this);
    }

    setToolBar(toolBar) {
        this.setState({ toolBar });
    }

  render() {
    return (
            <HashRouter>
                <Switch>
                    <Route path="/login" exact component={loginPage} />
                    <Navigation toolBar={this.state.toolBar} />
                    <Switch>
                        <Route path="/" exact render={(props) => <HomePage {...props} setToolBar={this.setToolBar} />} />
                        <Route path="/pageOne" render={(props) => <PageOne {...props} setToolBar={this.setToolBar} />}  />
                        <Route path="/pageTwo" render={(props) => <PageTwo {...props} setToolBar={this.setToolBar} />} />
                        <Route path="/pageThree" render={(props) => <PageThree {...props} setToolBar={this.setToolBar} />} />
                    </Switch>
                </Switch>
            </HashRouter>
    );
  }
}

这可以作为一个概念，但由于每个页面都有自己的路由到较低级别的页面，我不得不将这个功能传递到很多层次，并开始认为应该有一个更简单的方法。

我真正想做的是让每个页面在componentDidMount函数中使用自己的导航组件调度redux操作，并让导航组件订阅并相应地更新。

但是，我传递一个组件并将不可序列化的数据传递给redux（取决于你认为的人）充其量只是一种反模式，最糟糕的是资本犯罪。

那么，这样做的最佳方式是什么？如果它有任何区别我使用material-ui v1.0作为UI库。

Answer 1

我可以想到几种可能的解决方案来绕过在redux中存储组件（如果这是你的应用程序所要求的，我认为这很好）。

选项1：

将组件名称存储到您的redux商店而不是组件实例。然后，您可以创建一个<Toolbar />组件，该组件订阅组件名称并使用它来呈现正确的工具栏。需要注意的是，每个页面都需要创建自己独特的工具栏组件，即：<HomePageToolbar />，<PageOneToolbar />。您的主<Toolbar />组件将导入所有工具栏组件，并根据传入的名称有条件地呈现正确的组件：

getToolbar = () => {
    switch(this.props.toolbarName) {
        case 'homePage': {
            return <HomePageToolbar />;
        }
        case 'pageOne': {
            return <PageOneToolbar />;
        }
        default: {
            return <DefaultToolbar />;
        }
    }   
};

render () {
    const toolbar = this.getToolbar();
    return (
        <div>
            {toolbar}
        </div>
    )
}

选项2

使用唯一的查询参数来渲染工具栏。设置一个?toolbar=homePage查询参数，您的<Toolbar />组件将使用该参数以与上面相同的方式有条件地呈现工具栏。

选项3：

只需将组件存储在您的redux商店中并从那里直接拉出。

将React片段注入导航组件

1 个答案: