React类组件中购物车商品数量传递至Navbar的Badge计数器实现方案咨询

开发者阿泽

2026-4-30

我现在需要实现一个功能：点击Badge按钮后显示购物车内的商品数量。现有两个组件：

Navbar 类组件：内部的Badge需要展示购物车的商品数量
Cart 组件：需要把购物车的totalItems数据传递给Navbar

我尝试在Navbar的构造函数里处理数据，用了<Badge count={this.state.totalItems}>，但不知道怎么从Cart把数据传过来。附上我的组件代码：

Navbar组件代码：

class Navbar extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      current: "mail",
    }
  }
  handleClick = (e) => {
    console.log("click ", e);
    this.setState({ current: e.key });
  };
  render() {
    const { t } = this.props;
    const { current } = this.state;
    return (
      <div className="navbar">
        <Menu onClick={this.handleClick} selectedKeys={[current]} mode="horizontal" >
          <Menu.Item key="main" icon={<HomeOutlined />}>
            {t("menu.home")}
          </Menu.Item>
          <Menu.Item key="favorites" icon={<HeartOutlined />}>
            {t("menu.favorites")}
          </Menu.Item>
          <Menu.Item key="Faq" icon={<QuestionCircleOutlined />}>
            {t("menu.faq")}
          </Menu.Item>
        </Menu>
        <div className="navbar__logo">
          CLOTHES <span>.STORE</span>
        </div>
        <Menu onClick={this.handleClick} selectedKeys={[current]} mode="horizontal" className="right-menu" ></Menu>
        <div className="button_sign">{t("menu.signup")}</div>
        <Badge count={this.state.totalItems}>
          <ShoppingCartOutlined />
        </Badge>
        <div className="navbar_lang">
          <SetLanguage />
        </div>
      </div>
    );
  }
}

Cart组件代码：

export const Cart = ({ totalItems}) => {
  const classes = useStyles();
  return (
    <>
      <AppBar position="fixed" className={classes.appBar} color="inherit">
        <div>
          <IconButton arial-label="Show cart items" color="inherit">
            <Badge badgeContent={totalItems} color="secondary">
              <ShoppingCart/>
            </Badge>
          </IconButton>
        </div>
      </AppBar>
    </>
  );
};

实现思路：状态提升（State Lifting）

在React的单向数据流中，兄弟组件之间不能直接传递数据，我们需要把共享的状态（也就是totalItems）提升到它们的共同父组件中，然后通过props把状态和更新状态的方法分别传递给Navbar和Cart组件。

步骤1：创建/修改共同父组件（比如App组件）

假设你的Navbar和Cart都在App组件中渲染，我们在App里维护totalItems的状态，并提供一个更新它的方法：

class App extends React.Component {
  constructor(props) {
    super(props);
    // 初始化购物车数量
    this.state = {
      totalItems: 0
    };
  }

  // 定义更新购物车数量的方法
  updateTotalItems = (newCount) => {
    this.setState({ totalItems: newCount });
  };

  render() {
    return (
      <div className="app-container">
        {/* 把totalItems通过props传给Navbar */}
        <Navbar totalItems={this.state.totalItems} />
        {/* 把totalItems和更新方法传给Cart */}
        <Cart 
          totalItems={this.state.totalItems} 
          updateTotalItems={this.updateTotalItems} 
        />
        {/* 其他页面内容 */}
      </div>
    );
  }
}

步骤2：修改Navbar类组件，从props接收totalItems

Navbar不需要自己维护totalItems状态，直接从props中获取即可，修改它的Badge部分：

// Navbar组件的render方法中，修改Badge的count属性
<Badge count={this.props.totalItems}>
  <ShoppingCartOutlined />
</Badge>

如果需要验证数据是否传递成功，也可以在Navbar的构造函数中打印props：

constructor(props){
  super(props);
  this.state = {
    current: "mail",
  }
  // 可选：打印props确认数据是否传递成功
  console.log("Navbar props:", props);
}

步骤3：在Cart组件中调用更新方法修改数量

当购物车中的商品数量发生变化时（比如添加商品、删除商品），调用父组件传过来的updateTotalItems方法更新状态：

// 假设Cart组件中有添加商品的逻辑
const addToCart = () => {
  // 计算新的数量，比如当前数量+1
  const newCount = totalItems + 1;
  // 调用父组件的方法更新状态
  updateTotalItems(newCount);
};

// 然后在组件中触发这个方法，比如按钮点击
<button onClick={addToCart}>添加到购物车</button>

为什么这样做？

React的数据流是单向的，子组件不能直接修改父组件的状态，只能通过父组件提供的回调函数来更新
状态提升可以让多个组件共享同一状态，保证数据的一致性，避免不同组件中数据不同步的问题

内容的提问来源于stack exchange，提问作者DEVIL