如何在反应中使用 facebook SDK

Question

我目前正在使用react，通过使用react-facebook-rogin 库，我成功登录了facebook。但是没有登出功能！

所以我决定使用facebook SDK，但是我不知道如何在反应中使用javascript代码。

根据facebook官方文档，我需要在HTML中编写如下代码。

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v11.0'
    });
  };
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

之后，这是注销的代码

FB.logout(function(response) {
  // user is now logged out
});

这是我使用 react-facebook-rogin 库的代码。

import React from "react";
import Navbar from './components/Navbar';
import { BrowserRouter as Switch, Route } from 'react-router-dom'
import './components/Navbar.css';
import './App.css';
import MainStructure from "./pages/MainStructure";
import Study from "./pages/Study"
import FacebookLogin from 'react-facebook-login'
import { useState } from "react";

function App() {
  
  const responseFacebook = (response) => {
    console.log(response);
    setIsLoggedin(true)
  }

  const [isLoggedin, setIsLoggedin] = useState(false);

  return (

    isLoggedin ?
      (<div>

        <Route path='/' >
          <Navbar/>
        </Route>


        <Route exact path='/' >
          <MainStructure/>
        </Route>

        <Route path='/study'>
          <Study/>
        </Route>
      </div>) 
      :
      (
        <div className="">
          <div className="facebookLogin">
            <FacebookLogin
              appId="145617534309548"
              autoLoad={true}
              fields="name,email,picture"
              //onClick={componentClicked}
              callback={responseFacebook} />
          </div>
        </div>)


  );
}

export default App;

如何在 React 代码中使用 javascript 代码？

Answer 1

我不会为此使用已有 3 年历史的库，但您可以尝试在单击时使用“window.FB.logout”或“FB.logout”。无论哪种方式，您都可以自己加载 JS SDK，而不是旧的依赖项。这是一个如何工作的示例（未经测试）：

const SomeComponent = () => {
    const [isLoggedin, setIsLoggedin] = useState(false);

    const onLoginClick = () => {
        window.FB.login(...);
    };

    useEffect(() => {
        window.fbAsyncInit = () => {
            window.FB.init({
                appId            : 'your-app-id',
                autoLogAppEvents : true,
                xfbml            : true,
                version          : 'v11.0'
            });
        };
        (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'));
    }, []);

    return (
        <div><button onClick={onLoginClick}>Login with Facebook</button></div>
    );
};

这应该是只加载一次的组件 - 例如，始终存在的根组件。

在那种情况下，你当然也可以使用FB.logout()。

如何在反应中使用 facebook SDK

how can I use facebook SDK in react

javascript

reactjs

facebook