Reactjs 将React片段注入到导航组件中

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

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

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

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>
    );
  }
}

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={toolbar:null}；
this.setToolBar=this.setToolBar.bind（this）；
}
设置工具栏（工具栏）{
this.setState（{toolBar}）；
}
render（）{
返回(
} />
}  />
} />
} />
);
}
}

这是一个概念，但由于每个页面都有自己的路由到较低级别的页面，我必须将此功能向下传递许多级别，并且我开始认为应该有一种更简单的方法

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

然而，我正在传递一个组件，并将不可序列化的数据传递给redux（取决于您相信的人），充其量是一种反模式，充其量是一种死罪

---

那么，最好的方法是什么呢？如果有什么不同的话，我会使用material ui v1.0作为ui库。

我可以想出一些可能的解决方案来绕过在redux中存储组件（如果你的应用程序需要这样做的话，我认为这很好）

选项1:

将组件名称存储到redux存储中，而不是组件实例。然后，您可以创建订阅组件名称的

组件，并使用它呈现正确的工具栏。这里需要注意的是，每个页面都需要创建自己独特的工具栏组件，即：

，

。主

组件将导入所有工具栏组件，并根据传入的名称有条件地呈现正确的组件：

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>
    )
}

getToolbar=（）=>{
开关（this.props.toolbarName）{
案例“主页”：{
返回；
}
案例“第一页”：{
返回；
}
默认值：{
返回；
}
}   
};
渲染（）{
const toolbar=this.getToolbar（）；
返回(
{toolbar}
)
}

选项2

使用唯一的查询参数渲染工具栏。设置

？toolbar=homePage

查询参数，您的

组件将使用该参数有条件地以与上述相同的方式呈现工具栏

选项3:

---

只需将组件存储在redux存储中，然后直接从那里取出即可。

选项1和2的问题在于onClick事件需要绑定到页面组件，而不是导航。