![](/img/trans.png)
[英]Material-UI ListItem as Link Component Changes URL but Not Rendering Component
[英]Why does renderToString throws error about useLayoutEffect while rendering Material-UI component?
我正在使用 React v.16.12.0 和 @MaterialUI/core v4.8.1。
我正在嘗試為 React Leaflet Marker 創建自定義圖標。 該圖標是來自 Material-UI 的Fab
組件。 為此,我需要將 HTML 字符串傳遞給L.DivIcon
(DivIcon Docs) Leaflet 組件,因此我使用react-dom/server
renderToString()
方法。
它拋出一個錯誤:
警告:useLayoutEffect 在服務器上什么都不做,因為它的效果無法編碼到服務器渲染器的輸出格式中。 這將導致初始的非水合 UI 與預期的 UI 之間不匹配。 為避免這種情況,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(
<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 以便將其作為圖標傳遞給 Leaflet Marker?
我使用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='&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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.