时间戳

首页 > 解决方案 > 如何在 ReactMapGL 组件上放置输入表单组件覆盖？

reactjs - 如何在 ReactMapGL 组件上放置输入表单组件覆盖？

问题描述

我是 React 应用程序开发的新手。我正在尝试创建一个使用react-map-gl库中的ReactMapGL类的反应应用程序。这会渲染地图（我创建了地图组件）。我想在此地图上向页面右侧显示一个输入表单（我创建了 SampleInputForm 组件）作为覆盖。我正在使用 material-ui 框架进行前端 UI 设计。以下是代码片段：-

    const useStyles = makeStyles((theme: Theme) =>
      createStyles({
       root: {
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
    },
  })
)
      <div className={classes.root}>
        <Map />
        <Sampleinputform />
      </div>

这会在页面下方的 mapbox 区域之外显示表单。如果我在我的地图组件中使用Sampleinputform作为子组件，那么它可以正常工作，并且我会在页面右上角的 mapbox 顶部获得一个输入表单作为叠加层，下面是代码片段：-

export default function Map() {
return (
    <ReactMapGL>
      // some code to render the map goes here
      <SampleInputForm/>
    </ReactMapGL>
}

我在第一个代码片段中遗漏了什么，因此我不需要在 Map 组件中传递表单？

标签： reactjsmaterial-uimapboxreact-map-gl

解决方案

使用找到的帮助——

我能够将我的组件<SampleInputForm/>放在外面<ReactMapGL>。

.control-panel{
#the styling elements goes here
}

const defaultContainer = ({ children }) => <div className="control-panel">{children}</div>

const SampleInputForm: React.FC = () => {
    const Container = defaultContainer
  return (
    <Container>
          <form noValidate> 
             //Input components goes here
          <form> 
    </Container> )
}

请建议是否有另一种更好的解决方案来做同样的事情。

推荐阅读