4

我们有一个使用样式化组件的 react 项目，其中 ThemeProvider 提供了一个所有组件都应该能够引用的主题对象。在这个项目中，我们有一个传单地图，我们正在以标记的形式向其中添加 React 组件，使用ReactDOMServer.renderToString. 当它试图访问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}

有用。但它是一种 hack - 它应该能够使用主题。

应该发生什么（以及在其他地方使用 NodeIcon 组件时会发生什么）：它在其中找到一种颜色theme.colors并将其应用于多边形的笔划。

确实发生的情况是页面在它尝试访问的样式中出现 js 错误而死掉theme.colors.blue1，说它无法读取，因为对象未定义。不知何故theme没有进入组件，可能是因为使用ReactDOMServer.renderToString. 知道如何在theme不对代码进行大量重组的情况下使标记组件可用（因为我们已经有了一个可行但笨拙的解决方案）？

4

0 回答 0