Я использую React v.16.12.0 и @ MaterialUI / core v4.8.1.

Я пытаюсь создать собственную иконку для React Leaflet Marker. Значок представляет собой Fab компонент из Material-UI. Чтобы сделать это, мне нужно передать HTML-строку в компонент Leaflet L.DivIcon (DivIcon Docs) , поэтому я использую renderToString() из renderToString() react-dom/server .

И это выдает ошибку:

Предупреждение: useLayoutEffect ничего не делает на сервере, поскольку его эффект не может быть закодирован в выходной формат средства визуализации сервера. Это приведет к несоответствию между исходным негидратированным пользовательским интерфейсом и предполагаемым пользовательским интерфейсом. Чтобы избежать этого, useLayoutEffect следует использовать только в компонентах, которые отображаются исключительно на клиенте. в NoSsr в кнопке в ForwardRef (ButtonBase) в WithStyles (ForwardRef (ButtonBase)) в ForwardRef (Fab) в WithStyles (ForwardRef (Fab)) (в src / index.js: 9)

Пока я не использую useLayoutEffect.

Вот простой пример:

 import React from "react"; import ReactDOM from "react-dom"; import ReactDOMServer from 'react-dom/server'; import Fab from '@material-ui/core/Fab'; function App() { return ReactDOMServer.renderToString( {amp}lt;Fab size="small" variant="extended"{amp}gt; Test {amp}lt;/Fab{amp}gt;); } const rootElement = document.getElementById("root"); ReactDOM.render({amp}lt;App /{amp}gt;, rootElement); 

Онлайн: https://codesandbox.io/s/material-ui-rendertostring-tc90b

Почему он выбрасывает эту ошибку? Что не так с этим кодом? Есть ли другой способ сгенерировать HTML-строку из компонента Material-UI, чтобы передать ее в виде значка в маркер листовки?