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

Question

我试图在使用 React 构建的网站上的标签后立即添加 Facebooks 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 只加载一次。

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

Errors when adding Facebook SDK to React website

facebook-javascript-sdk

reactjs