来自 CDN 简单示例的 React 传单

问题描述 投票：0回答：1

我有一个非常基本的 CDN 服务 React 和 React Leaflet 设置，但它失败了。 React-Leaflet 似乎使用了 React 环境的另一个上下文/版本。错误是：

react.production.js:522 Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at o.useState (react.production.js:522:33)
    at g (MapContainer.js:5:21)
    at te (react-dom-client.production.js:3681:21)
    at si (react-dom-client.production.js:5432:15)
    at G1 (react-dom-client.production.js:6927:14)
    at ev (react-dom-client.production.js:10860:14)
    at My (react-dom-client.production.js:10743:37)
    at Vc (react-dom-client.production.js:10724:7)
    at tv (react-dom-client.production.js:10332:40)
    at dv (react-dom-client.production.js:11471:3)
    at I (scheduler.production.js:143:44)

简单的 HTML 页面如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.25.3/babel.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
    crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
    crossorigin=""></script>

    <script src="https://cdn.tailwindcss.com"></script>

    <style>
        .example { display:none;position:absolute;border:1px solid black;background-color:silver}
        .example.shown { display:block;position:absolute;border:1px solid black;background-color:silver}
        html,body {box-sizing: border-box; height: 100%;}
        .fullHeight {
            height: 100%;
        }
        .flex-box-vertical {
            display: flex;
            flex-flow: column;
        }
    </style>
</head>
<body>
    <div id="main" class='fullHeight'></div>
    
    <script type="text/babel" data-type="module">
        import { MapContainer } from 'https://cdn.esm.sh/react-leaflet/MapContainer'
        import { TileLayer } from 'https://cdn.esm.sh/react-leaflet/TileLayer'
        import { Popup } from 'https://cdn.esm.sh/react-leaflet/Popup'
        import { Marker } from 'https://cdn.esm.sh/react-leaflet/Marker'

        import React from "https://esm.sh/[email protected]"
        import ReactDOMClient from "https://esm.sh/[email protected]/client"

        const App = () => <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
        <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.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>

        let app = ReactDOMClient.createRoot(document.querySelector("#main"))
        app.render(<App/>)


    </script>
</body>
</html>

有人对此有任何见解吗？

TIA。 约翰。

reactjs react-leaflet
1个回答
0
投票

好的，经过一些调试，我发现我在 esm.sh 模块中使用了不同的主机，一个称为 esm.sh，另一个称为 cdn.esm.sh。将主机名更正为相似后，一切正常。由于状态的原因，您的应用程序需要与 React-Leaflet 中使用的库相同的库。

以下 html 和代码有效：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.25.3/babel.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
    crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
    crossorigin=""></script>

    <script src="https://cdn.tailwindcss.com"></script>

    <style>
        .example { display:none;position:absolute;border:1px solid black;background-color:silver}
        .example.shown { display:block;position:absolute;border:1px solid black;background-color:silver}
        html,body {box-sizing: border-box; height: 100%;}
        .fullHeight {
            height: 100%;
        }
        .flex-box-vertical {
            display: flex;
            flex-flow: column;
        }
    </style>
</head>
<body>
    <div id="main" class='fullHeight'></div>
    
    <script type="text/babel" data-type="module">
        import { MapContainer } from 'https://cdn.esm.sh/react-leaflet/MapContainer'
        import { TileLayer } from 'https://cdn.esm.sh/react-leaflet/TileLayer'
        import { Popup } from 'https://cdn.esm.sh/react-leaflet/Popup'
        import { Marker } from 'https://cdn.esm.sh/react-leaflet/Marker'

        import React from "https://cdn.esm.sh/[email protected]"
        import ReactDOMClient from "https://cdn.esm.sh/[email protected]/client"

        const App = () => <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
        <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.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>

        let app = ReactDOMClient.createRoot(document.querySelector("#main"))
        app.render(<App/>)


    </script>
</body>
</html>

请注意，所有导入语句都指向同一来源。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.