小编pet*_*vak的帖子

我正在尝试Leaflet使用 Typescript 在 Next.js 中渲染地图。我读到需要禁用 ssr 以避免“窗口未定义”问题，但在尝试生成地图时：

import React from "react";
import { MapContainer, TileLayer } from "react-leaflet";

export const Leaflet: React.FC = () => {
  return (
    <MapContainer center={{ lat: 48.71291, lng: 44.52693 }} zoom={13}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright%22%3EOpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
    </MapContainer>
  );
};

这是渲染它的：

const Home: NextPage = () => {
  const MapWithNoSSR = dynamic(() => import("../components/Leaflet"), {
    ssr: false,
  });

  return (
    <>
      <MapWithNoSSR/>
    </>
    );
  };

export default Home

TypesSript 给我这个错误：

'() => …

我想为我的主管理界面创建一个组件作为各个屏幕的包装。

本质上是这个 JS 代码：

import Header from '../Header'
  
function TopNavbarLayout({ children }) {
    return (
        <>
            <Header />
            <main>{children}</main>
        </>
    )
}

export default TopNavbarLayout

但在打字稿中。当我尝试时：

import Header from '../Header'

interface Props {
  children: JSX.Element
}

const TopNavbarLayout = ({children} : Props) => {
  return (
    <>
      <Header />
      <main>{children}</main>
    </>
  )
}

export default TopNavbarLayout

我收到 linting 错误，提示需要类型，但 VsCode 似乎无法识别 <> 和 </> 中的任何内容。

有人对我需要做什么来替换 TS 中上面的 JS 组件表单有任何建议吗？

我打算发送的 {children} 是不同的仪表板。