Как поместить наложение компонента формы ввода на компонент ReactMapGL? - PullRequest
Новая
       42

Как поместить наложение компонента формы ввода на компонент ReactMapGL?

0 голосов
/ 13 марта 2020

Я новичок в разработке приложений React. Я пытаюсь создать приложение реагирования, которое использует класс ReactMapGL из библиотеки act-map-gl . Это отображает карту (я создал компонент Карта). Я хочу отобразить форму ввода (я создал компонент SampleInputForm) в качестве наложения на эту карту в правой части страницы. Я использую материал-UI Framework для дизайна пользовательского интерфейса. Ниже приведен фрагмент кода: - 

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

Это отображает форму вне области mapbox вниз на странице. Если я использую Sampleinputform внутри компонента Map в качестве дочернего компонента, то он работает нормально, и я получаю форму ввода в качестве наложения в верхней части карты справа вверху страницы, ниже приведен фрагмент кода: - 

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

Чего мне не хватает в первом фрагменте кода, чтобы мне не нужно было передавать форму внутри компонента Map?

1 Ответ

0 голосов
/ 23 марта 2020

Использование справки найдено -

Я смог разместить свои компоненты <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> )
}

Пожалуйста, предложите, если есть другое лучшее решение сделать то же самое.

...