the TabBar component of antd-mobile is used in the react development process. The number of badge badges in
can be modified in the current App component, but it also needs to be modified in other components (GoodsList, ShoppingCar, etc.). How to implement it?
I tried to import App components in other components, but could not call the getGoodsNumber () method

import React, { Component } from "react";
import { TabBar, Toast } from "antd-mobile";
import axios from "axios";
import Tool from "./components/Tool";

import GoodsList from "./pages/index/GoodsList";
import Classification from "./pages/classification/Classification";
import ShoppingCar from "./pages/shoppingCar/ShoppingCar";
import Mine from "./pages/mine/Mine";

const IP = localStorage.getItem("locIp");
const SESSION = localStorage.getItem("session");
export default class App extends Component{
    constructor(props){
        super(props);
        this.state = {
            selectedTab: "blueTab",
            hidden: false,
            goodsNumBadge: 0
        }
        localStorage.setItem("mID", this.props.match.params.mID);
    }

    componentDidMount() {
      this.getGoodsNumber();//
    }

    // 
    getGoodsNumber() {
      let url = IP+"/shopCart/findShopCartNum";
      let data = new FormData();
      data.append("session", SESSION);
      axios.post(url, data)
        .then((res) => {
          res = res.data;
          if (res.code === 1) {console.log(res);
            this.setState({
              goodsNumBadge: res.content
            })
          } else if (res.code === 2) {
            Toast.info(res.content, 1);
          } else if (res.code === 3) {
            Toast.info(res.content, 1);
            Tool.loginOut();
          } else if (res.code === 4) {
            Toast.fail(res.content, 1);
          }
        })
        .catch(() => {
          Toast.fail("", 2);
        })
    }

    renderContent(pageText) {
        switch(pageText){
            case "index":
                return <GoodsList />
            case "fenlei":
                return <Classification />
            case "ShoppingCar":
                return <ShoppingCar />
            case "My":
                return <Mine />
            default:
              return false;
        }
    }

    render() {
        return (
          <div style={{ position: "fixed", height: "100%", width: "100%", top: 0 }}>
            <TabBar
              unselectedTintColor="-sharp949494"
              tintColor="-sharpf8b62b"
              barTintColor="white"
              hidden={this.state.hidden}
            >
              <TabBar.Item
                title=""
                key="index"
                icon={<div className="iconfont icon-shouyeweidianjizhuangtai" style={{fontSize: 22}} />}
                selectedIcon={<div className="iconfont icon-shouye" style={{fontSize: 22, color: "-sharpf8b62b"}} />}
                selected={this.state.selectedTab === "blueTab"}
                onPress={() => {
                  this.setState({
                    selectedTab: "blueTab",
                  });
                }}
                data-seed="logId"
              >
                {this.renderContent("index")}
              </TabBar.Item>

              <TabBar.Item
                title=""
                key="fenlei"
                icon={<div className="iconfont icon-fenleiweidianjizhuangtai" style={{fontSize: 22}} />}
                selectedIcon={<div className="iconfont icon-fenleidianjizhuangtai-" style={{fontSize: 22, color: "-sharpf8b62b"}} />}
                selected={this.state.selectedTab === "redTab"}
                onPress={() => {
                  this.setState({
                    selectedTab: "redTab",
                  });
                }}
                data-seed="logId1"
              >
                {this.renderContent("fenlei")}
              </TabBar.Item>

              <TabBar.Item
                title=""
                key="ShoppingCar"
                badge={this.state.goodsNumBadge}
                icon={<div className="iconfont icon-gouwucheweidianjizhuangtai" style={{fontSize: 22}} />}
                selectedIcon={<div className="iconfont icon-gouwuchedianjizhuangtai" style={{fontSize: 22, color: "-sharpf8b62b"}} />}
                selected={this.state.selectedTab === "greenTab"}
                onPress={() => {
                  this.setState({
                    selectedTab: "greenTab",
                  });
                }}
              >
                {this.renderContent("ShoppingCar")}
              </TabBar.Item>

              <TabBar.Item
                title=""
                key="my"
                icon={<div className="iconfont icon-wodeweidianjizhuangtai" style={{fontSize: 22}} />}
                selectedIcon={<div className="iconfont icon-wodedianjizhuangtai" style={{fontSize: 22, color: "-sharpf8b62b"}} />}
                selected={this.state.selectedTab === "yellowTab"}
                onPress={() => {
                  this.setState({
                    selectedTab: "yellowTab",
                  });
                }}
              >
                {this.renderContent("My")}
              </TabBar.Item>
            </TabBar>
          </div>
        );
    }
}