0

React アプリ開発は初めてです。react-map-glライブラリのReactMapGLクラスを使用する反応アプリを作成しようとしています。これにより、マップがレンダリングされます (Map コンポーネントを作成しました)。入力フォーム (SampleInputForm コンポーネントを作成) をこのマップのオーバーレイとしてページの右側に表示したいと考えています。フロントエンドの UI デザインに material-ui フレームワークを使用しています。以下はコードスニペットです:-

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

これにより、ページの下のマップボックス領域の外側にフォームが表示されます。Map コンポーネント内でSampleinputformを子コンポーネントとして使用すると、問題なく動作し、ページの右上にある mapbox の上にオーバーレイとして入力フォームが表示されます。以下にコード スニペットを示します。

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

Map コンポーネント内でフォームを渡す必要がないように、最初のコード スニペットに欠けているものは何ですか?

4

1 に答える 1