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

【问题标题】：How to put a input form component overlay on ReactMapGL component?如何在 ReactMapGL 组件上放置输入表单组件覆盖？
【发布时间】：2020-03-13 00:15:05
【问题描述】：

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

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

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

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

我在第一个代码 sn-p 中缺少什么以便我不需要在 Map 组件中传递表单？

【问题讨论】：

标签： reactjs material-ui mapbox react-map-gl

【解决方案1】：

使用找到的help --

我能够将我的组件 <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> )
}

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

【讨论】：