ReactJS中点击listing card书签如何增减topbar React Icon数值

核心逻辑很简单：Topbar和ListingCard是兄弟/远亲组件，不要各自维护独立状态，把共享的计数、bookmark选中状态存到两个组件都能访问到的上层位置，点击按钮时统一更新上层状态，两个组件自动拿最新值重渲染。

方案1：状态提升（无额外依赖，90%的场景用这个就够） #

这是React原生支持的最稳妥方案，不需要装任何第三方库：

• 先找到Topbar和ListingCard的最近公共父组件（一般是当前列表页的根组件），在这个组件里用useState维护所有共享状态，同时定义bookmark按钮的点击回调
  示例代码：

  // 公共父组件：ListingPage.jsx
  import { useState } from 'react'
  import Topbar from './Topbar'
  import ListingCard from './ListingCard'
  
  export default function ListingPage() {
    // 统一维护共享的交互状态
    const [interactState, setInteractState] = useState({
      likeCount: 0,
      dislikeCount: 0,
      isBookmarked: false
    })
  
    // bookmark点击逻辑：按自己的业务规则改计数增减逻辑
    const toggleBookmark = () => {
      setInteractState(prev => {
        const nextBookmarkStatus = !prev.isBookmarked
        return {
          ...prev,
          isBookmarked: nextBookmarkStatus,
          // 示例逻辑：选中bookmark时点赞+1，取消时-1，要改点踩就同步加dislikeCount的计算
          likeCount: nextBookmarkStatus ? prev.likeCount + 1 : prev.likeCount - 1
        }
      })
    }
  
    return (
      <div className="page-wrapper">
        {/* 把计数传给Topbar做展示 */}
        <Topbar 
          like={interactState.likeCount} 
          dislike={interactState.dislikeCount} 
        />
        <div className="card-list">
          {/* 把bookmark状态、点击回调传给卡片组件 */}
          <ListingCard 
            bookmarked={interactState.isBookmarked}
            onBookmarkClick={toggleBookmark}
          />
        </div>
      </div>
    )
  }
  

• Topbar组件只负责接收props渲染，不需要自己存状态：

  // Topbar.jsx
  import { FcLike, FcDislike } from 'react-icons/fc'
  export default function Topbar({ like, dislike }) {
    return (
      <div className="topbar">
        <div className="interact-item">
          <FcLike />
          <span>{like}</span>
        </div>
        <div className="interact-item">
          <FcDislike />
          <span>{dislike}</span>
        </div>
      </div>
    )
  }
  

• ListingCard里的bookmark按钮直接绑定传进来的回调即可，点击就会触发上层状态更新，Topbar自动同步最新计数：

  // ListingCard.jsx
  import { BsBookmark, BsBookmarkFill } from 'react-icons/bs'
  export default function ListingCard({ bookmarked, onBookmarkClick }) {
    return (
      <div className="listing-card">
        {/* 卡片自身的封面、标题等内容 */}
        <button className="bookmark-btn" onClick={onBookmarkClick}>
          {bookmarked ? <BsBookmarkFill /> : <BsBookmark />}
        </button>
      </div>
    )
  }
  

方案2：Context/全局状态管理（适合组件嵌套层级深的场景） #

如果Topbar和ListingCard之间隔了多层嵌套组件，一层层传props太麻烦，可以选这两种方式：

• 用React自带的createContext建一个交互上下文，把共享状态和更新方法放到Provider里，包在组件最外层，两个子组件直接用useContext拿需要的值和方法，不用中间层传props
• 如果项目已经接了Zustand、Redux、Jotai这类全局状态库，直接把交互状态存在全局store里，ListingCard点击时dispatch更新动作，Topbar直接订阅store里的计数渲染即可，逻辑和状态提升完全一致，只是状态存放位置从页面父组件移到了全局store。

避坑提醒：别搞什么自定义事件监听、window上挂全局变量那套来同步状态，很容易出现状态不同步、组件不重渲染、内存泄漏的问题，跟着React单向数据流的规则走就不会出问题。

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