Javascript 将返回值从一个组件传递到另一个组件

我有两个组件： Component1使用MapboxGl渲染贴图。 Component2呈现一个按钮，单击该按钮时，会进行API调用，获取Geojson数据并将其存储到变量中

问题: Component1需要Geojson数据在地图上绘制路线。 如何将数据从组件2传递到组件1？ 我尝试了从component2导出变量并在component1中导入它，但没有成功

---

任何帮助都将不胜感激。

您可以将函数作为道具传递给按钮组件，并在收到数据时调用它。这意味着承载映射的容器组件和按钮组件需要保持返回数据的状态。然后将状态作为属性传递给映射组件

如果您拥有的两个组件彼此独立，那么您可能需要的是一个状态容器，例如。将这两个组件包装到一个新组件中，并移动存储中需要共享的所有数据。否则按照Wakeel的答案-。

在这种情况下，我建议使用或

以下是上下文的要点（imho比Redux简单一点）。这个例子是基于

import React，{createContext，useContext，useState}来自“React”
const GeoJSONContext=createContext（{}）//这将是geojson数据。
const GeoJSONProvider=GeoJSONContext.Provider
常量按钮容器=（道具）=>{
const{setGeoJSON}=useContext（GeoJSONContext）
返回setGeoJSON（等待fetchGeoJSON（））}>
获取数据
}
常量映射容器=（道具）=>{
const{geoJSON}=useContext（GeoJSONContext）
返回
}
常量应用=（道具）=>{
const[geoJSON，setGeoJSON]=useState（[]）
返回(
)
}

这是否回答了您的问题？另见，谢谢。我检查了它，但它似乎对我不起作用，因为我要传递的变量还没有值，因为它只有在调用函数后才获得值。所以我不是一个静态值。