Визуализация компонента как маркера листовки с использованием renderToString теряет тему - PullRequest
1 голос
/ 04 июня 2019

У нас есть реактивный проект, который использует стилизованные компоненты, а 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}

Работает.Но это своего рода хак - он должен иметь возможность использовать тему.

Что должно произойти (и то, что происходит, когда компонент NodeIcon используется в другом месте): он находит цвет в theme.colors и применяет егона обводку многоугольника.

Что происходит, так это то, что страница умирает с ошибкой js в строке, в которой она пытается получить доступ к theme.colors.blue1, говоря, что она не может быть прочитана, поскольку объектне определено.Почему-то theme не входит в компонент, возможно, из-за использования ReactDOMServer.renderToString.Любая идея, как сделать theme доступным для компонента маркера без огромной реструктуризации кода (поскольку у нас уже есть работающее, но неудобное решение)?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...