从动态导入的组件中导入变量
我有一个动态导入到页面的（地图）组件。
const map = dynamic（（）=＆gt; import（'../组件/mapcomp'），{ssr：false，}）
我也想导入一个变量。
const [taskImg, setTaskImg] = useState(null);
export {taskImg};
该组件是动态导入的，因为否则我会得到窗口未定义错误，这就是解决方案。 与变量相同。如果我想导入它，我会收到上述错误。 但是我需要在此页面中使用taskimg变量。 我该怎么做？
MAPCOMP：
import { MapContainer, TileLayer, useMap, Marker, Popup,
ImageOverlay } from 'react-leaflet'
import { useEffect, useState } from "react";
import Head from "next/head"
import { LatLngBounds } from 'leaflet';
const Map = () => {
const [userPos, setUserPos] = useState(null)
const [taskPos, setTaskPos] = useState(null)
const [task, setTask] = useState()
const [taskImg, setTaskImg] = useState(null);
const bounds = new LatLngBounds([81.505, -0.09], [50.773941, -84.12544])
useEffect(() => {
function getRandomTask(arr) {
const randomIndex = Math.floor(Math.random() * arr.length);
const item = arr[randomIndex];
return item;
}
const tasks = [
"boller",
"placeholder"
];
setTask(getRandomTask(tasks));
},[])
useEffect(() => {
if(task == "boller"){
console.log("boller")
setTaskImg("/sf2.jpg")
} else if(task == "placeholder") {
console.log("placeholder")
}
},[task])
return (
<>
<Head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
</Head>
<MapContainer
className='absolute h-[750px] w-[750px] left-[45%] top-[80px] bg-no-repeat bg-cover bg-[#738aaf]'
center={[71.505, -40.09]} zoom={3} scrollWheelZoom={true} noWrap={true}>
<ImageOverlay
url="/allmaphres.png"
bounds={bounds}
opacity={1}
zIndex={10}
/>
</MapContainer>
</>
);
}
export default Map;
PAGE（MAPCOMP在此处渲染）：
import { memo, useEffect, useMemo, useState } from "react";
import dynamic from 'next/dynamic'
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import Head from "next/head";
const Map = dynamic(() => import('../components/Mapcomp'), {
ssr: false,
})
const All = () => {
return (
<>
<Navbar />
<div className="bg-white w-[500px] h-[100vh]">
<div className="task border-4 border-red-500 h-[250px]">
{/* taskImg && <img src={taskImg}/> */}
</div>
<div className="flex justify-center gap-[200px] text-xl">
<span>Tasks:</span>
<span>Points:</span>
</div>
<div className="flex justify-center gap-[240px] text-xl">
<span>X</span>
<span>X</span>
</div>
</div>
<Map />
<Footer />
</>
);
}
export default All;
I have a (Map) component dynamically imported to my page.
const Map = dynamic(() => import('../components/Mapcomp'), { ssr: false, })
From that component I also want to import a variable.
const [taskImg, setTaskImg] = useState(null);
export {taskImg};
The component is dynamically imported because otherwise I get a window is not defined error, and this is the solution for that.
Same with the variable. If I want to import it I get the above error.
But I need to use the taskImg variable in this page.
How can I do that?
Mapcomp:
import { MapContainer, TileLayer, useMap, Marker, Popup,
ImageOverlay } from 'react-leaflet'
import { useEffect, useState } from "react";
import Head from "next/head"
import { LatLngBounds } from 'leaflet';
const Map = () => {
const [userPos, setUserPos] = useState(null)
const [taskPos, setTaskPos] = useState(null)
const [task, setTask] = useState()
const [taskImg, setTaskImg] = useState(null);
const bounds = new LatLngBounds([81.505, -0.09], [50.773941, -84.12544])
useEffect(() => {
function getRandomTask(arr) {
const randomIndex = Math.floor(Math.random() * arr.length);
const item = arr[randomIndex];
return item;
}
const tasks = [
"boller",
"placeholder"
];
setTask(getRandomTask(tasks));
},[])
useEffect(() => {
if(task == "boller"){
console.log("boller")
setTaskImg("/sf2.jpg")
} else if(task == "placeholder") {
console.log("placeholder")
}
},[task])
return (
<>
<Head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
</Head>
<MapContainer
className='absolute h-[750px] w-[750px] left-[45%] top-[80px] bg-no-repeat bg-cover bg-[#738aaf]'
center={[71.505, -40.09]} zoom={3} scrollWheelZoom={true} noWrap={true}>
<ImageOverlay
url="/allmaphres.png"
bounds={bounds}
opacity={1}
zIndex={10}
/>
</MapContainer>
</>
);
}
export default Map;
page (mapcomp is rendered here):
import { memo, useEffect, useMemo, useState } from "react";
import dynamic from 'next/dynamic'
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import Head from "next/head";
const Map = dynamic(() => import('../components/Mapcomp'), {
ssr: false,
})
const All = () => {
return (
<>
<Navbar />
<div className="bg-white w-[500px] h-[100vh]">
<div className="task border-4 border-red-500 h-[250px]">
{/* taskImg && <img src={taskImg}/> */}
</div>
<div className="flex justify-center gap-[200px] text-xl">
<span>Tasks:</span>
<span>Points:</span>
</div>
<div className="flex justify-center gap-[240px] text-xl">
<span>X</span>
<span>X</span>
</div>
</div>
<Map />
<Footer />
</>
);
}
export default All;
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您不能将状态导出到另一个组件中，您要么需要使用状态管理库，例如
redux，要么创建使状态可用于所有其他组件的上下文You can't export a state to another component you either need to use a state management library like
reduxor create a context which make the state available for all the other components