为什么renderToString在呈现Material-UI组件时抛出关于UseLayouteFffect的错误？

Question

我使用的是React v.16.12.0和@MaterialUI/Core v4.8.1。

我正在尝试为React传单标记创建自定义图标。图标是来自Material-UI的Fab组件。为此，我需要将HTML字符串传递给L.DivIcon(DivIcon Docs）传单组件，因此我使用RenderToString()方法从React-DOM/Server。

它会抛出一个错误：

警告：UseLayouteFffect在服务器上不执行任何操作，因为它的效果无法编码为服务器呈现器的输出格式。这将导致初始、非水合UI和预期UI之间的不匹配。为了避免这种情况，UseLayouteFffect应该只用于在客户端上以独占方式呈现的组件中。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(
    <Fab size="small" variant="extended">
      Test
    </Fab>);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在线:https://codesandbox.io/s/material-ui-rendertoString-tc90b

它为什么要抛出那个错误？这个代码有什么不对的？有没有其他方法可以从Material-UI组件生成HTML-String，以便将其作为图标传递给传单标记？

Answer 1

我使用RenderToStaticMarkup呈现自定义标记。标记正在呈现，但仍然得到警告。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { renderToStaticMarkup } from "react-dom/server";
import { divIcon } from "leaflet";
import { Map, TileLayer, Marker, Popup } from "react-leaflet";
import Fab from "@material-ui/core/Fab";

import "./styles.css";

class App extends Component {
  state = {
    lat: 51.505,
    lng: -0.091,
    zoom: 13
  };

  render() {
    const position = [this.state.lat, this.state.lng];
    const iconMarkup = renderToStaticMarkup(
      <Fab size="small" variant="extended">
        Test
      </Fab>
    );
    const customMarkerIcon = divIcon({
      html: iconMarkup
    });

    return (
      <div>
        <Map center={position} zoom={this.state.zoom}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
          <Marker position={position} icon={customMarkerIcon}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </Map>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

工作代码:https://codesandbox.io/s/react-leaflet-icon-material-MX1IU