react使用antd-mobile的TabBar如何更改badge的值?

Question

在react开发过程中使用了antd-mobile的TabBar组件，
其中的badge徽章数可以在当前App组件修改，
但是在其他组件（GoodsList 、ShoppingCar 等）中也需要修改，如何实现？
我尝试在其他组件import App组件，但是无法调用getGoodsNumber（）方法

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="#949494"
              tintColor="#f8b62b"
              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: '#f8b62b'}} />}
                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: '#f8b62b'}} />}
                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: '#f8b62b'}} />}
                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: '#f8b62b'}} />}
                selected={this.state.selectedTab === 'yellowTab'}
                onPress={() => {
                  this.setState({
                    selectedTab: 'yellowTab',
                  });
                }}
              >
                {this.renderContent('My')}
              </TabBar.Item>
            </TabBar>
          </div>
        );
    }
}

Answer 1

你这个问题实际上是 react 组件间通讯的问题，可以看看React 组件间通讯 - 淘宝前端团队（FED）。这种情况不多的话就用 eventProxy，不然就用 redux