Javascript 如何让组件控制React Native中的同级组件？

我是一个新的反应和制作一个应用程序。我目前关注的有三个方面：

• AllList.js：由搜索栏和RowCard.js实例的平面列表组成的屏幕

• RowCard.js：一个自定义TouchableHighlight组件，显示API中的项目，点击时当前返回警报

• drinkpoup.js：一个自定义模式组件，需要从AllList获取ID，但可以通过点击RowCard进行控制

我已经有了RowCard实例的列表，但是我需要找到一种方法，当点击RowCard时，使modal from drinkPopup出现。我对如何处理这个问题感到非常困惑，因为据我所知，道具只能从父母传给孩子

---

有什么建议吗？我环顾四周寻找答案，但我发现的结果令人困惑。

因此，您需要一个状态，该状态将可由

DrinkPoup

和

RowCard

访问。方法是将其保存在其父级（

AllList

）中并相应地传递

所以你的父母应该是这样的：

const AllList = () => {
    const [visibleModalId, setVisibleModalId] = useState(null)
    return <>
        <RowCard setVisibleModalId={setVisibleModalId}>
        <drinkPopup visibleModalId={visibleModalId}>
    </>
}

const AllList=（）=>{
常量[visibleModalId，setVisibleModalId]=useState（null）
返回
}

---

通过这种方式，您可以从

行卡

控制模式（通过在那里调用

设置visibleModalId

），并且您还可以知道

drinkPopup

是否应可见（因为它知道

visibleModalId
是否为空）
谢谢，这很有帮助！