如何在AppBar中创建非静态自定义内容

Question

我有一个材料-ui AppBar，它在构图中占据了很高的位置，如下所示：

<App>
  <AppBar/>
  <Main>
    <Route component={FooPage}/>
    <Route component={BarPage}/>
  </Main
</App>

我希望FooPage和BarPage能够将自己的内容“注入”到AppBar中，例如菜单，选择等等。 - 没有AppBar或托管AppBar的组件要特别注意Foo和/或Bar或其他任何执行此操作的玩家。我可以想象一种新颖的做法，让Foo向全世界宣布“Foo活跃”并拥有FooBar感知的AppBar组件，回答说“好......我会为你渲染一个Foo-Menu。 。“

我想要做的就是在没有Ren版本的gnarly switch / case的情况下将其关闭。我对React很新，我认为这不是一个具体的问题，但我想知道......是否有一种直接的方式将孩子加载到AppBar（或ToolBar）中AppBar与其内容无关？如果是这样，那在语法上会是什么样的呢？

Answer 1

AppBar有两个属性可以接受元素作为值。因此，您可以使用iconElementLeft或iconElementRight属性传入您想要显示的任何元素。

以这个JSFiddle为例：

https://jsfiddle.net/Asalem1/ha6v1714/26/