React开发问题：如何通过函数更新prop，点击planetCard时传递planet.id到PlanetPanelCard

核心实现逻辑为通过状态提升管理公共选中ID，点击触发状态更新后自动同步到目标组件的Prop，具体实现步骤如下：

• 步骤1：在两个组件的公共父组件中声明选中ID状态

import { useState } from 'react'
// 父组件内代码
const [selectedPlanetId, setSelectedPlanetId] = useState(null)

• 步骤2：给PlanetCard组件传递选中回调函数

// 父组件渲染PlanetCard时传参，假设你是遍历planet数组渲染多个卡片
{planetList.map(planet => (
  <PlanetCard 
    key={planet.id}
    planet={planet}
    onSelectPlanet={setSelectedPlanetId}
  />
))}

• 步骤3：PlanetCard组件内部绑定点击事件触发回调

// PlanetCard组件内代码
const PlanetCard = ({planet, onSelectPlanet}) => {
  return (
    <div onClick={() => onSelectPlanet(planet.id)}>
      {/* 卡片原有内容 */}
    </div>
  )
}

• 步骤4：将公共状态作为Prop传递给PlanetPanelCard组件

// 父组件渲染PlanetPanelCard时传参
<PlanetPanelCard targetPlanetId={selectedPlanetId} />

完成以上操作后，每次点击PlanetCard都会更新父组件的selectedPlanetId状态，PlanetPanelCard的targetPlanetId Prop会自动同步最新值，触发组件重渲染。
如果两个组件层级差过大、逐层传参不方便，也可以使用全局状态管理工具（比如Zustand、Redux）存储选中ID，两个组件分别读写全局状态即可实现同步。

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