Могу ли я дважды запустить другой componentDidMount ()?

Question

Я пытаюсь преобразовать 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? (Или способ запустить HTML в React?)

Спасибо.

Answer 1

Вы можете сделать это способом React вместо того, чтобы просто копировать и вставлять ванильный код, вот как я бы это сделал

Загрузить скрипт (я использую 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]);