如何在 React index.js 中编写脚本？答案

【问题标题】：How do I write script in React index.js?如何在 React index.js 中编写脚本？
【发布时间】：2020-06-19 03:13:50
【问题描述】：

到目前为止，我一直在使用基本的 HTML/CSS/JS，现在我尝试使用 React/Gatsby。我从 Kakao 获得了 API 代码，并确认以下代码在 index.html 中有效：

<body>
    <div id="map" style="width:1000px;height:500px;"></div>

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

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

    }</script>
</body>

由于我正在尝试 React/Gatsby 框架，我必须以某种方式将该脚本重新格式化为 index.js。 HTML 可以很容易地复制/粘贴到返回函数，但我不知道如何在 React index.js 中编写上述脚本。

import React from "react"

export default class Home extends React.Component {
  render() {
  return (
    <div style={{ color: `purple` }}>
      <p>Welcome to donghwankim.com!</p>
      <p>Powered by Gatsby</p>
      <div id="map" style={{"height" : "1000px", "width" : "500px"}}></div>

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

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

      }</script>
    </div>
  )}
}

我尝试了几件事：

只需像上面一样复制粘贴脚本。在这种情况下，我从复制的脚本中得到语法错误：

意外的令牌。你是说{'}'} 还是&rbrace;？

危险地使用SetInnerHTML。没有语法错误，但地图 API 工作不正常。

谢谢。

【问题讨论】：

标签： javascript html reactjs gatsby

【解决方案1】：

这个脚本的一部分似乎需要为 React 重写。你应该为此寻找一个支持 React 的库。如果没有，您可以使用DOM refs 访问mapContainer 而无需document.getElementById。或者，如果您只想按原样使用此脚本，则可以使用更简单的静态站点生成器，例如 Jekyll，不需要您使用 React。

【讨论】：

【解决方案2】：

那里有很多实现。

首先，您需要使用<Helmet> 标签异步加载脚本：

import React from "react"
import Helmet from "react-helmet"

export default class Home extends React.Component {
  render() {

  return (
    <div style={{ color: `purple` }}>
      <Helmet>
        <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608" type="text/javascript"/>
      </Helmet> 
      <p>Welcome to donghwankim.com!</p>
      <p>Powered by Gatsby</p>
      <div id="map" style={{"height" : "1000px", "width" : "500px"}}></div>
    </div>
  )}
}

由于您的问题是异步的，您需要为您的地图加载一个<div> 容器并等待其加载，然后您需要传递您的地图选项。 React 中的首选方法是使用引用，而不是 document.getElementById（或类似方法），直接从 DOM 中检索值。您需要使用componentDidMount() 生命周期来实现它，因为它是一个在组件安装（插入到树中）后立即触发的方法：

import React from "react"
import Helmet from "react-helmet"

export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount(){
  const map= this.myRef.current;
  const mapOption = {
    center: new kakao.maps.LatLng(37.56591, 126.97894), 
    level: 4, 
    mapTypeId : kakao.maps.MapTypeId.ROADMAP 
  };

  const yourMap = new kakao.maps.Map(map, mapOption);
 }

  render() {

  return (
    <div style={{ color: `purple` }}>
      <Helmet>
        <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608" type="text/javascript"/>
      </Helmet> 
      <p>Welcome to donghwankim.com!</p>
      <p>Powered by Gatsby</p>
      <div id="map" ref={this.myRef}  style={{"height" : "1000px", "width" : "500px"}}></div>
    </div>
  )}
}

注意：您可能需要卸载地图以避免过多的资源消耗。这取决于库的实现方式及其文档。