javascript - 带有 next.js 的传单?
问题描述
我收到一个参考错误:
将 next.js 与 leaflet.js 一起使用时未定义窗口。
想知道这个问题是否有一个简单的解决方案 - 使用 next.js 是否会使我的工作流程过于复杂?
对于那些对确切代码感到好奇的人,
import React, { createRef, Component } from "react";
import L from "leaflet";
import { Map, TileLayer, Marker, Popup, DivOverlay } from "react-leaflet";
import axios from "axios";
import Header from "./Header";
export default class PDXMap extends Component {
state = {
hasLocation: false,
latlng: {
lat: 45.5127,
lng: -122.679565
},
geoJSON: null
};
mapRef = createRef();
componentDidMount() {
this.addLegend();
if (!this.state.hasLocation) {
this.mapRef.current.leafletElement.locate({
setView: true
});
}
axios
.get(
"https://opendata.arcgis.com/datasets/40151125cedd49f09d211b48bb33f081_183.geojson"
)
.then(data => {
const geoJSONData = data.data;
this.setState({ geoJSON: geoJSONData });
return L.geoJSON(this.state.geoJSON).addTo(
this.mapRef.current.leafletElement
);
});
}
handleClick = () => {
this.mapRef.current.leafletElement.locate();
};
handleLocationFound = e => {
console.log(e);
this.setState({
hasLocation: true,
latlng: e.latlng
});
};
getGeoJsonStyle = (feature, layer) => {
return {
color: "#006400",
weight: 10,
opacity: 0.5
};
};
addLegend = () => {
const map = this.mapRef.current.leafletElement;
L.Control.Watermark = L.Control.extend({
onAdd: function(map) {
var img = L.DomUtil.create("img");
img.src = "https://leafletjs.com/docs/images/logo.png";
img.style.width = "200px";
return img;
}
});
L.control.watermark = function(opts) {
return new L.Control.Watermark(opts);
};
L.control.watermark({ position: "bottomleft" }).addTo(map);
};
render() {
const marker = this.state.hasLocation ? (
<Marker position={this.state.latlng}>
<Popup>
<span>You are here</span>
</Popup>
</Marker>
) : null;
return (
<Map
className="map-element"
center={this.state.latlng}
length={4}
onClick={this.handleClick}
setView={true}
onLocationfound={this.handleLocationFound}
ref={this.mapRef}
zoom={14}
>
<TileLayer
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{marker}
</Map>
);
}
}
/**
* TODO: Add Header + Legend to map
* - Header to be styled
* - Legend to be present in header
*
*/
import React from 'react';
import PDXMap from "../components/map";
export default function SignIn() {
const classes = useStyles();
return (
<PDXMap/>
);
}
我很乐意使用任何前进的方式——只是对获得功能性产品感兴趣。
干杯!
更新
嘿大家,
我仍然收到此错误(比我计划的要晚一点回来,哈哈)。
我目前正在将这种方法与 useEffects 一起使用,
import React, {useEffect, useState} from 'react';
function RenderCompleted() {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true)
return () => {
setMounted(false)
}
});
return mounted;
}
export default RenderCompleted;
这是它显示的页面
import React, { useEffect } from "react";
import Router, { useRouter } from "next/router";
import { useRef, useState } from "react";
//viz
import PDXMap from "../../components/Visualization/GIS/map";
import RenderCompleted from "../../components/utils/utils";
// import fetch from 'isomorphic-unfetch';
import { Cookies, CookiesProvider } from "react-cookie";
const cookies = new Cookies();
//containers
// Layouts
import Layout from "../../components/Layout/Layout_example";
import Chart from "../../components/Visualization/Graphs/Chart";
import Table from "../../components/Visualization/Tables/Table";
import Sidebar from "../../components/Layout/Sidebar/SidebarProperty";
export default function Bargains() {
// const [inbrowser, setBrowser] = useState(false);
const choiceRef = useRef<any>();
const [message, setMessage] = useState<any>(null);
const [productList, setProductList] = useState<any>([]);
const [searched, setSearched] = useState(false);
const router = useRouter();
let token = cookies.get("token");
// useEffect(() => {
// setBrowser(true);
// });
const isMounted = RenderCompleted();
const columns = React.useMemo(
() => [
....
],
[]
)
async function handleChoice() {
console.log("searching...", choiceRef.current?.value);
setMessage("Searching...");
var headers = {
"Content-Type": "application/x-www-form-urlencoded",
"auth-token": token,
};
fetch(
....
}
<div className="flex flex-wrap ">
{isMounted && <PDXMap/>}
<Table columns={columns as any} data={productList as any} />
</div>
</div>
</div>
</div>
</Layout>
)
}
具有相同的错误消息
ReferenceError: window is not defined
##更新两个
好吧,奇怪的是,当我从另一个页面浏览网站时它确实有效,但当我加载页面本身时却不行。
会对此进行思考,但也许是因为地图正在使用 componentDidMount() 加载数据并且交互很奇怪?
更新
好的,我基于https://github.com/rajeshdh/react-leaflet-with-nextjs创建了一个更简单的示例
现在它正在加载,但瓷砖显示不正确,有些瓷砖没有加载。
这是我用来简单的地图组件,
import React, { Component, createRef } from 'react';
import { Map, TileLayer, Marker, Popup, MapControl, withLeaflet } from 'react-leaflet';
import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';
class SearchBox extends MapControl {
constructor(props) {
super(props);
props.leaflet.map.on('geosearch/showlocation', (e) => props.updateMarker(e));
}
createLeafletElement() {
const searchEl = GeoSearchControl({
provider: new OpenStreetMapProvider(),
style: 'bar',
showMarker: true,
showPopup: false,
autoClose: true,
retainZoomLevel: false,
animateZoom: true,
keepResult: false,
searchLabel: 'search'
});
return searchEl;
}
}
export default class MyMap extends Component {
state = {
center: {
lat: 31.698956,
lng: 76.732407,
},
marker: {
lat: 31.698956,
lng: 76.732407,
},
zoom: 13,
draggable: true,
}
refmarker = createRef(this.state.marker)
toggleDraggable = () => {
this.setState({ draggable: !this.state.draggable });
}
updateMarker = (e) => {
// const marker = e.marker;
this.setState({
marker: e.marker.getLatLng(),
});
console.log(e.marker.getLatLng());
}
updatePosition = () => {
const marker = this.refmarker.current;
if (marker != null) {
this.setState({
marker: marker.leafletElement.getLatLng(),
});
}
console.log(marker.leafletElement.getLatLng());
}
render() {
const position = [this.state.center.lat, this.state.center.lng];
const markerPosition = [this.state.marker.lat, this.state.marker.lng];
const SearchBar = withLeaflet(SearchBox);
return (
<div className="map-root">
<Map center={position} zoom={this.state.zoom} style={{
height:"700px"
}}>
<TileLayer
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker
draggable={true}
onDragend={this.updatePosition}
position={markerPosition}
animate={true}
ref={this.refmarker}>
<Popup minWidth={90}>
<span onClick={this.toggleDraggable}>
{this.state.draggable ? 'DRAG MARKER' : 'MARKER FIXED'}
</span>
</Popup>
</Marker>
<SearchBar updateMarker={this.updateMarker} />
</Map>
<style jsx>{`
.map-root {
height: 100%;
}
.leaflet-container {
height: 400px !important;
width: 80%;
margin: 0 auto;
}
`}
</style>
</div>
);
}
}
并称它为我正在使用它,
const SimpleExample = dynamic(() => import("../../components/Visualization/GIS/map"), {
ssr: false
});
并尝试过这个 {isMounted && }
解决方案
2020年的答案
我也有这个问题并在我自己的项目中解决了,所以我想我会分享我所做的。
NextJS 可以动态加载库并限制该事件,因此它不会在服务器端渲染期间发生。有关更多详细信息,请参阅文档。
在下面的示例中,我将使用和修改来自 NextJS 10.0 和 React-Leaflet 3.0 的文档网站的示例代码。
旁注:如果您使用 TypeScript,请确保安装@types/leaflet
,否则您将在center
和attribution
属性上遇到编译错误。
首先,我将react-leaflet
代码拆分为一个单独的组件文件,如下所示:
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
const Map = () => {
return (
<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false} style={{height: 400, width: "100%"}}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
)
}
export default Map
我调用了该文件map.tsx
并将其放在名为的文件夹中,但如果您不使用 TypeScript components
,您可能会调用它。map.jsx
注意:此代码与嵌入页面的位置不同,这很重要,否则您仍然会遇到window undefined
错误。
另请注意:不要忘记指定MapContainer
组件的样式,这样它就不会在高度/宽度上呈现为零像素。在上面的示例中,我style={{height: 400, width: "100%"}}
为此添加了属性。
现在要使用该组件,请像这样利用 NextJS 的动态加载:
import dynamic from 'next/dynamic'
function HomePage() {
const Map = dynamic(
() => import('@components/map'), // replace '@components/map' with your component's location
{ ssr: false } // This line is important. It's what prevents server-side render
)
return <Map />
}
export default HomePage
如果您希望在加载时将地图替换为其他内容(可能是一个好习惯),您应该使用动态函数的加载属性,如下所示:
import dynamic from 'next/dynamic'
function HomePage() {
const Map = dynamic(
() => import('@components/map'), // replace '@components/map' with your component's location
{
loading: () => <p>A map is loading</p>,
ssr: false // This line is important. It's what prevents server-side render
}
)
return <Map />
}
export default HomePage
Adrian Ciura 评论了当你的组件重新渲染时可能发生的闪烁,即使地图没有任何变化。他们建议使用新的React.useMemo
钩子来解决这个问题。如果这样做,您的代码可能如下所示:
import React from 'react'
import dynamic from 'next/dynamic'
function HomePage() {
const Map = React.useMemo(() => dynamic(
() => import('@components/map'), // replace '@components/map' with your component's location
{
loading: () => <p>A map is loading</p>,
ssr: false // This line is important. It's what prevents server-side render
}
), [/* list variables which should trigger a re-render here */])
return <Map />
}
export default HomePage
我希望这有帮助。如果react-leaflet
对存在进行测试会更容易,window
因此它可以优雅地失败,但这种解决方法应该在那之前有效。
推荐阅读
- css - 在没有javascript的情况下使用第n个孩子时有没有办法访问n?
- r - officedown 不产生输出:错误:read_docx 仅支持 docx 文件
- javascript - Web Speech API text-to-speech : 如何让一个 JavaScript 代码适用于要阅读的多个文本?
- python - torch.random() TypeError:“模块”对象不可调用
- javascript - 向javascript数组添加键
- python - 如何使用 Django ORM 存储元组的元组?
- javascript - Node MongoDB 循环遍历集合的第一条记录并将其推送到数组中
- python - 等待两个元素之一出现使用 By.XPATH,'//*[contains(text(),
- python - 使用函数的返回值更新 pandas 数据框中的空单元格
- mysql-error-1064 - 仅转储满足特定条件的行,例如限制 1000