如何将 html+javascript 代码转换为 react-hook

【问题标题】：How to html+javascrip code convert to react-hook如何将 html+javascript 代码转换为 react-hook
【发布时间】：2021-08-22 16:07:39
【问题描述】：

这是代码 html + javascipt 显示 Longdomap 的地图，我想转换为 React Hook

这是文件 Longdomap enter link description here

提前感谢您的回答

<!DOCTYPE HTML>
<html>
  <head>
        <meta charset="UTF-8">
        <title>Create Map Sample | Longdo Map</title>
        <style type="text/css">
html {
  height: 100%;
}
body {
  margin: 0px;
  height: 100%;
}
#map {
  height: 100%;
}
</style>
        <script type="text/javascript" src="https://api.longdo.com/map/?key=[YOUR-KEY-API]"></script>
        <script>
          function init() {
            var map = new longdo.Map({
              placeholder: document.getElementById('map')
            });
          }
        </script>
  </head>
  <body onload="init();">
      <div id="map"></div>
  </body>
</html>

【问题讨论】：

标签： javascript html reactjs react-hooks

【解决方案1】：

试试下面：首先，将以下脚本标记添加到公共文件夹中的 index.html 中，将 [YOUR-KEY-API] 替换为实际密钥:)

<script type="text/javascript" src="https://api.longdo.com/map/?key=[YOUR-KEY-API]"></script>

创建一个如下所示的 React 函数组件：

import React, {useEffect} from 'react';

const MyMap = () => {

    const init = () => {
         var map = new longdo.Map({
            placeholder: document.getElementById('map')
         });
   }

    useEffect(() => {
         init();
    }, []);

    return (<div id="map"></div>);

}

export default MyMap;

在需要显示的地方导入并创建组件：

    ...
    <MyMap/>
    ...

【讨论】：

@Somkiat Chathanoi，看看这个！