React Native兄弟组件交互: 点击RowCard触发drinkPopup

整个交互链路完全遵循React单向数据流规则，不需要让RowCard和drinkPopup产生直接联系。你对props的认知存在部分偏差：props不仅支持父组件向子组件传递静态数据，还可以把父组件定义的回调函数作为props值传递给子组件，让子组件在触发交互时反过来通知父组件更新自身状态。这种实现完全符合React的设计规范，也是新手阶段最容易理解的跨组件交互方式。
你当前三个组件的结构中，AllList是RowCard和drinkPopup的共同顶层父组件，因此只需要把控制模态框的状态全部提升到AllList中统一管理，就能没有多余复杂度地实现需求。

• 在AllList.js中定义两个核心状态变量，作为整个交互链路的唯一数据源：
  • popupVisible：布尔值，控制drinkPopup的显隐
  • currentDrinkId：存储被点击条目的ID，后续传给drinkPopup做数据加载
    函数组件的状态初始化参考写法：

  const [popupVisible, setPopupVisible] = useState(false);
  const [currentDrinkId, setCurrentDrinkId] = useState(null);
  

• 在AllList渲染FlatList时，把“打开模态框”的逻辑包装成回调函数，通过props传给每一个RowCard实例：
  原来的renderItem方法不需要额外引入新的依赖，只需要在传入RowCard的props中增加onCardPress字段，这个方法内部直接调用AllList的状态更新方法，把当前被点击的条目ID存到currentDrinkId，同时把popupVisible设为true。参考写法：

  <FlatList
    data={drinkList}
    renderItem={({ item }) => (
      <RowCard
        itemData={item}
        onCardPress={() => {
          setCurrentDrinkId(item.id)
          setPopupVisible(true)
        }}
      />
    )}
    keyExtractor={(item) => item.id.toString()}
  />
  

• 修改RowCard.js的内部点击逻辑，把原来触发alert的代码替换为调用从props收到的onCardPress方法：
  RowCard全程不需要知道drinkPopup的存在，它只需要承担“被点击时发出通知”的职责。参考修改方式：
  （函数组件写法）

  // 从props中解构拿到传入的回调
  function RowCard({ itemData, onCardPress }) {
    return (
      <TouchableHighlight
        // 原来的onPress是触发alert，现在替换成调用props传来的回调
        onPress={onCardPress}
      >
        {/* 原来的卡片展示内容保持不变 */}
      </TouchableHighlight>
    )
  }
  

• 在AllList.js的同级位置渲染drinkPopup组件，把之前定义的状态值和关闭回调通过props传进去：
  drinkPopup需要的所有输入参数全部来自AllList的状态，不需要RowCard做任何额外传值。参考写法：

  <drinkPopup
    visible={popupVisible}
    drinkId={currentDrinkId}
    onClose={() => setPopupVisible(false)}
  />
  

• 上述实现没有打破“props从父传子”的规则：RowCard调用的onCardPress、drinkPopup收到的visible/drinkId/onClose，全都是从共同父组件AllList向下传递的props，整个数据流是单向的——RowCard触发交互→通知AllList更新状态→状态更新后自动把新值传给drinkPopup触发组件重新渲染。
• 这种场景完全不需要引入全局状态管理库、也不需要用ref做跨组件方法调用、更不需要在RowCard中直接引用drinkPopup组件，把共享状态提升到两个子组件的共同父级，是React官方推荐的标准实现方式，复杂度最低、后续维护成本也最小。
• 新手阶段容易被晦涩的进阶方案误导，当前简单的层级组件结构根本不需要用到事件总线、自定义全局hook这类工具，基础的状态提升就能解决全部问题。

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