简介
react-facebook-extended 是一个可以方便快捷地在 React 应用中使用 Facebook 的 API 的 npm 包。通过它，你可以轻松地在你的 React 应用中嵌入 Facebook 的社交登录、社交分享以及社交评论等功能。本文将详细介绍该 npm 包的使用方法。
安装
在使用 react-facebook-extended 之前，你需要确保已经安装了 React 和 React-dom，可以使用以下命令进行安装：
npm install --save react react-dom
接下来可以进行 react-facebook-extended 的安装：
npm install --save react-facebook-extended
安装完毕后，你需要在你的应用中引入它。
如果你使用的是 ES6 或者 TypeScript，可以通过以下代码进行引入：
import Facebook from 'react-facebook-extended';
如果你使用的是 CommonJS，则使用以下代码：
const Facebook = require('react-facebook-extended');使用
1. 使用社交登录功能
使用社交登录功能需要先在 Facebook 的开发者平台上创建一个应用，并获取到应用的 ID 和秘钥。接下来，你可以通过以下代码在你的应用中使用社交登录功能：
-- -------------------- ---- -------
---------------
-------------
---------------------
---------------------
--------------- -- -
------- ------------------------
----- ---- --------
---------
--
--其中，appId 参数是你在 Facebook 开放平台中创建应用时生成的应用 ID，onSuccess 是成功登录时的回调函数，onFailure 是登录失败时的回调函数。
render 是可选的参数，可以用来自定义登录按钮的样式和内容。
2. 使用社交分享功能
使用社交分享功能需要先在 Facebook 的开发者平台上创建一个应用，并获取到应用的 ID 和秘钥。接下来，你可以通过以下代码在你的应用中使用社交分享功能:
-- -------------------- ---- -------
---------------
-------------
----------
-------------
-----------------
-------------------
---------- ----------- -- -- -
------- ----------------------
----- -- --------
---------
--
--其中，appId 参数是你在 Facebook 开放平台中创建应用时生成的应用 ID，href 参数是你要分享的 URL，quote 参数是你想要分享的引文，hashtag 参数是你想要添加的标签，mobileIframe 参数是一个布尔值，用于指示是否在移动设备上使用 IFrame。
render 是可选的参数，可以用来自定义分享按钮的样式和内容。
3. 使用社交评论功能
使用社交评论功能需要先在 Facebook 的开发者平台上创建一个应用，并获取到应用的 ID 和秘钥。接下来，你可以通过以下代码在你的应用中使用社交评论功能：
<Facebook.Comments
appId={appId}
href={url}
numPosts={5} // 最多显示几条评论
width={500} // 评论框宽度
/>其中，appId 参数是你在 Facebook 开放平台中创建应用时生成的应用 ID，href 参数是你要评论的 URL，numPosts 是一个数字，代表最多显示几条评论，width 代表评论框宽度。
以上就是三种常见的使用方法。当然，react-facebook-extended 中还有其他很多功能，更多细节可以查看项目的文档。
结语
react-facebook-extended 包为开发者提供了方便快捷地在 React 应用中使用 Facebook 的 API 功能，除了使用文档提供的方法之外，如果你需要更多自定义功能，也可以在包内找到相应的 API 进行使用。希望这篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005577181e8991b448d4713