如何用自定义组件替换 React-Leaflet Popup？答案

【问题标题】：How to replace React-Leaflet Popup with custom component?如何用自定义组件替换 React-Leaflet Popup？
【发布时间】：2016-08-13 16:08:00
【问题描述】：

我在一个项目中使用 React-Leaflet 和 (callemall)Material-UI。我正在尝试在 React-Leaflet 的 <Popup></Popup> 组件中呈现 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>

【问题讨论】：

标签： javascript reactjs material-ui react-leaflet

【解决方案1】：

长话短说，React-Leaflet 和 Leaflet 为弹出窗口呈现静态 html，因此无法在其中呈现动态内容。渲染 material-ui 组件是可能的，但它不会是交互式的。您可以通过使用<MuiThemeProvider></MuiThemeProvider> 包装您的组件来完成此操作。您只需确保将内容设置为完整视图，而不是使用扩展器之类的东西。

解决方法如下：

<Popup>
    <MuiThemeProvider muiTheme={getMuiTheme(yourThemeName)}>
        <YourCustomComponent />
    </MuiThemeProvider>
</Popup>

【讨论】：