时间戳

首页 > 解决方案 > 我可以两次运行不同的 componentDidMount() 吗？

javascript - 我可以两次运行不同的 componentDidMount() 吗？

问题描述

我正在尝试将 html API 转换为 ReactJS。

原始 HTML API：

<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608"></script>
<script>
    var mapContainer = document.getElementById('map'), 
        mapOption = {
            center: new kakao.maps.LatLng(37.56388, 126.98920),
            level: 6, 
            mapTypeId : kakao.maps.MapTypeId.ROADMAP 
        }; 

    var map = new kakao.maps.Map(mapContainer, mapOption); 

</script>

我尝试将其转换为 React：

class App extends Component {

    componentDidMount() {
        const script = document.createElement('script');
        script.async = true;
        script.src = "https://dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608";
        document.head.appendChild(script);

        script.onload = () => {
            kakao.maps.load(() => {
                let el = document.getElementById('map');
                let map = new kakao.maps.Map(el, {
                    center: new kakao.maps.Coords(523951.25, 1085073.75)
                });
            });
        };
    }

    render() {
        return (
            <div className="App" id="map"></div>
        );
    }
}

我意识到转换后的代码没有显示地图。（原始代码运行良好）我尝试将原始代码中的两个脚本合并为一个，它也没有显示地图。所以我认为错误是因为这两个脚本在componentDidMount()中组合在一起。

有没有办法在 React 中一个一个地运行脚本？（或者一种在 React 中运行 HTML 的方法？）

谢谢你。

标签： javascripthtmlreactjsgatsby

解决方案

你可以用 React 的方式来做，而不是只复制和粘贴 vanilla 代码，这就是我的做法

加载脚本（我正在使用https://www.npmjs.com/package/scriptjs）

const [scriptLoaded, setScriptLoaded] = useState(false);
const url = "https://dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608";

useEffect(() => {
  scriptjs(url, () => setScriptLoaded(true));
}, []);

加载后从窗口获取地图

useEffect(() => {
  const kakao = window.kakao;
  kakao && kakao.maps.load(() => {
    // your code here
  });
}, [scriptLoaded]);

推荐阅读