3

プロジェクトで React-Leaflet と (callemall)Material-UI を使用しています。<Popup></Popup>React-Leaflet のコンポーネント内で Material-UI Card コンポーネントをレンダリングしようとしています。コンポーネントとしてポップアップにプルしようとしましたが、ポップアップではコンポーネントが正常に機能しません。具体的には、カード コンポーネントにはそれを展開するボタン要素がありますが、残念ながら、ポップアップでクリックできません。オーバーライドする必要がある CSS-y がいくつかあると確信していますが、ポップアップ コンポーネントを独自のコンポーネントに置き換えるだけの簡単なオプションがあると思いますが、どうすればよいかわかりません。どんな洞察も大歓迎です:)

私のコードは次のようになります。

<Marker position={position}>
    <Popup>
        <MapPopup />
    </Popup>
</Marker>

インポートされたコンポーネントは次のようになります: (読みやすくするために、スタイルと重要でない詳細を削除しました)

<Card>
    <CardHeader />
        <CardMedia
            expandable={true}
            overlay={
                <CardText expandable={true}>
                    <div>
                        <p>Text</p>
                        <Chip>text</Chip>
                    </div>
                    <div>
                        <p>Text</p>
                        <Chip>Text</Chip>
                    </div>
                </CardText>
            }>
        <img src="cardMediaImageURL" />
    </CardMedia>
</Card>
4

1 に答える 1

5

簡単に言えば、React-Leaflet と Leaflet はポップアップの静的 html をレンダリングするため、その中に動的コンテンツをレンダリングすることはできません。material-ui コンポーネントのレンダリングは可能ですが、インタラクティブではありません。これは、コンポーネントを でラップすることで実現できます<MuiThemeProvider></MuiThemeProvider>。エキスパンダーのようなものではなく、コンテンツが完全なビューに設定されていることを確認する必要があります.

解決策は次のとおりです。

<Popup>
    <MuiThemeProvider muiTheme={getMuiTheme(yourThemeName)}>
        <YourCustomComponent />
    </MuiThemeProvider>
</Popup>
于 2016-08-30T21:14:16.303 に答える