DeckGL带有React–Map的JSX包装组件

Question

我正在将DeckGL与React+Typescript一起使用，我正在寻找一种方法，从React-Map-gl为Map组件创建一个包装组件，以处理其自身的功能。

目前，我有一个正在运行的实现，但Map组件必须是DeckGL的直接子级，如下所示：

const App = () => {
return (
<DeckGL ...>
<Map .../>
</DeckGL>
}

然而，我想实现的是将Map组件放在一个单独的文件中，在这个文件中可以传递道具和处理状态：

MapWrapper.tsx

const MapWrapper = (props) => {
// Handle state here, perhaps make use of useEffect()
return <Map .../>
}

App.tsx

import MapWrapper from "./MapWrapper"
const App = () => {
return (
<DeckGL ...>
<MapWrapper .../>
</DeckGL>
}

这里需要注意的是，deckgl的JSX层被转换为对象实例，因为它们不是真正的React组件，但我不确定React-Map-gl中的Map组件是否也是如此。

我感谢你的帮助，谢谢！

Answer 1

我认为Map组件实际上依赖于DeckGL组件。因此，一个变通方法可以是为DeckGL组件制作一个包装组件。然后您就有了一个可以处理状态和道具的组件。

这样的东西：

<Wrapper ...>
<DeckGL ...>
<Map .../>
</DeckGL>
</Wrapper>