Javascript 不是每页都打开抽屉

我在每页上都有一个导航栏作为标题，导航栏上有一个抽屉按钮，但只有在每个页面上添加onClick功能时，抽屉才会打开，如下所示。如何在导航栏所在的位置打开抽屉而不复制相同的代码

class ProductPage extends React.Component {
  state = {
    shoppingCartOpen: false,
  };
  drawerToggleClickHandler = () => {
    this.setState((prevState) => {
      return { shoppingCartOpen: !prevState.shoppingCartOpen };
    });
  };

  render() {
    let shoppingCartDrawer;
    if (this.state.shoppingCartOpen) {
      shoppingCartDrawer = <ShoppingCartDrawer />;
    }
    return (
      <ProductStyling>
        <ButtonAppBar drawerClickHandler={this.drawerToggleClickHandler} />
        {shoppingCartDrawer}

class ProductPage扩展了React.Component{
状态={
购物卡通笔：错，
};
抽屉式抽屉=（）=>{
this.setState（（prevState）=>{
返回{shoppingCartOpen:！prevState.shoppingCartOpen}；
});
};
render（）{
让购物车从抽屉里出来；
如果（此.state.shoppingCartOpen）{
购物车抽屉=；
}
返回(
{购物车抽屉}

---

我将导航栏添加到app.js中，这样它就会出现在每个页面上，但我无法让抽屉

onclick

事件工作

将状态移动到构造函数中或将状态移动到构造函数中