将Facebook SDK添加到React网站时出错

Question

我正在尝试在使用React构建的网站上的标签之后添加Facebook SDK代码，但是我收到了错误。我认为这是因为我的主页是.jsx模板，但我不确定如何包含此代码：

<script>
    window.fbAsyncInit = function () {
      FB.init({
        appId: '1813842465324998',
        autoLogAppEvents: true,
        xfbml: true,
        version: 'v2.11'
      }); <- unexpected token, expected "}". SYNTAX ERROR

      // Broadcast an event when FB object is ready
      var fbInitEvent = new Event('FBObjectReady');
      document.dispatchEvent(fbInitEvent);
    };

    (function (d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) { return; }
      js = d.createElement(s); js.id = id;
      js.src = "https://connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  </script>

Answer 1

JSX不允许JavaScript标记。相反，只需使用componentDidMount中的整个JavaScript代码即可。理想情况下，您可以将其放在一个单独的文件中，以处理Facebook的JS SDK。

在您使用JavaScript文件之后，无论如何都要使用脚本标记是毫无意义的。此外，可以多次调用render函数，但是您应该只加载一次JS SDK。