Javascript 点击另一个页面链接后，react.js中的Facebook事件插件消失

我一直在尝试让Facebook事件插件在我的CreateReact应用程序中工作，但我想不通

在我的Events.js文件中，我添加了以下内容：

SDK在index.html中导入

当我加载“实际事件”页面时，一切正常，但单击“开始”并返回“事件”后，插件消失。 有人说

componentDidMount（）{
window.FB.XFBML.parse（）}；
}

在组件中，但my Event.js是一个函数

---

我现在没有谷歌链接了，非常感谢您的帮助。

最简单的解决方案是使用iframe选项，但这并不能直接回答您的问题

回答1：使用

useffect

hook 您可以使用

useffect

钩子，而不是从类组件中使用

componentDidMount

生命周期方法：

useffect（（）=>{
window.FB.XFBML.parse（）；
}, []);

这将在每次渲染时调用

window.FB.XFBML.parse

注意：您可能需要使用

if（window.FB）

来包装它，以捕获

window.FB

未加载的实例

回答2：转换为类组件 当然，您可以将组件转换为旧的基于类的样式：

export default class Events {
  componentDidMount() {
    window.FB.XFBML.parse();
  }

  render() {
    return (
      <>
        {/* ... */}

        <div
          className="fb-page"
          data-href={`https://www.facebook.com/${artistName}`}
          data-tabs="events"
          data-width=""
          data-height=""
          data-small-header="true"
          data-adapt-container-width="true"
          data-hide-cover="false"
          data-show-facepile="true"
        >
          <div className="fb-xfbml-parse-ignore">
            <blockquote cite={`https://www.facebook.com/${artistName}/events`}>
              <a
                href={`https://www.facebook.com/${artistName}/events`}
                target="_blank"
              >
                {artistName} - coming events
              </a>
            </blockquote>
          </div>
        </div>
      </>
    );
  }
}

导出默认类事件{
componentDidMount（）{
window.FB.XFBML.parse（）；
}
render（）{
返回(
{/* ... */}
);
}
}

你在说什么Facebook事件插件？我还注意到您正在标记[facebook-sdk-4.x]这是过时的我正在使用他们开发人员网站上的插件我不相信我的问题与sdkSorry的过时版本有关我可能会将你与事件处理程序混淆，我的实际页面被称为Events.js以澄清-Events.js只是一个页面，其中包含关于我的艺术家档案即将发生的事件的信息谢谢你的支持回答！事实上，我使用了npm react facebook，让它在没有任何并发症的情况下工作。但我会尝试你的解决方案以防万一，如果它因为某种原因停止工作，我不喜欢依赖它