使用renderToString将组件渲染为传单标记会丢失主题

时间:2019-06-04 18:43:35

标签: reactjs leaflet styled-components react-dom-server

我们有一个使用样式化组件的react项目,其中的ThemeProvider提供了所有组件都应能够引用的主题对象。在这个项目中,我们有一个传单地图,并使用ReactDOMServer.renderToString以标记的形式向其中添加React组件。当尝试访问组件样式的theme时,theme未定义。以常规方式添加组件,即可正常工作。

我可以通过手动将主题对象导入到地图组件中并将主题对象作为属性传递给标记组件来强制其工作,但这似乎有些棘手-最好找出来为什么上下文会丢失。

在地图组件中:

const nodeContents = (
    <NodeIcon_svg />
    );
const nodeIcon = Leaflet.divIcon({html: ReactDOMServer.renderToString(nodeContents),
    iconSize: [60, 60],
    iconAnchor: [30, 30]
});

Leaflet.marker(latLng, { icon: nodeIcon }).addTo(_mapLayer);

在NodeIcon组件的样式中(主题包含具有几种命名颜色的对象):

export const NodeIcon_svg = styled.svg`
    polygon {
        stroke: ${({ theme }) => theme.colors.blue1)};
        fill: transparent;
    }
`;

如果我将其添加到地图组件中:

import themeColors from '../../theme';

并将此行添加到我们添加NodeIcon的位置:

theme={themeColors}

有效。但这有点像黑客-它应该能够使用主题。

应该发生什么(当在其他地方使用NodeIcon组件时也会发生什么):它将在theme.colors中找到一种颜色并将其应用于多边形的笔划。

实际发生的情况是页面死于尝试访问theme.colors.blue1的样式中的一行,并在其中出现js错误,表示无法读取,因为对象未定义。 theme无法以某种方式加入组件,可能是因为使用了ReactDOMServer.renderToString。知道如何在不进行大量代码重组的情况下使theme对标记组件可用吗(因为我们已经有了一个可行的但笨拙的解决方案)?

0 个答案:

没有答案