NPM包 react-disqus-thread-api 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在现代Web开发中，交互和评论是一个重要的组成部分。React Disquss thread API是React社区中的一个NPM包，它可以帮助Web开发人员轻松地将Disquss评论集成到他们的React应用程序中。这篇文章将介绍如何使用这个NPM包，让您开发更加高效！

安装和配置

在开始之前，您需要使用npm安装react-disqus-thread-api包:

npm install react-disqus-thread-api --save

接下来，您需要使用Disquss来创建一个账户，这可以通过访问他们的官方网站实现https://disqus.com/。创建一个账户后，您需要在Disquss中创建一个新的应用程序，然后将“应用程序API密钥”作为参数传递给react-disqus-thread-api:

//引入组件
import DisqusThreadApi from 'react-disqus-thread-api'

//渲染Disquss评论
<DisqusThreadApi
    shortname='disquss_shortname'
    apiKey='your_disqus_api_key'
/>

现在，您已经成功配置了Disquss评论集成到您的React应用程序中。

高级配置

React Disquss thread API提供了许多附加选项和配置属性，可以让您更好地控制评论的显示方式和行为。下面是可用选项的列表。

url

用于唯一标识Disquss评论区的URL。默认情况下，此选项使用当前页面的URL。您可以设置此选项以自定义评论区标识符。

<DisqusThreadApi
    shortname='disquss_shortname'
    apiKey='your_disqus_api_key'
    url='http://example.com/coment-thread'
/>

title

用于设置Disquss评论的标题。

<DisqusThreadApi
    shortname='disquss_shortname'
    apiKey='your_disqus_api_key'
    title='This is a example'
/>

identifier

用于标识Disquss评论区的唯一标识符。默认情况下，此选项使用当前页面的URL。您可以设置此选项以自定义评论区标识符。

<DisqusThreadApi
    shortname='disquss_shortname'
    apiKey='your_disqus_api_key'
    identifier='my_identifier'
/>

onNewComment

每次添加新评论时都会调用该回调函数。

<DisqusThreadApi
    shortname='disquss_shortname'
    apiKey='your_disqus_api_key'
    onNewComment={comment => console.log(comment)}
/>

示例代码

-- -------------------- ---- -------
------ ----- ---- --------
------ --------------- ---- --------------------------

----- ---------------- - -- -- -
    ----------------
        -----------------------------
        ----------------------------
        --------------------- -- ---------------------
        ----------------------
        --------------------------------------
        ----------- -- - --------
        --------------------------
    --
--

------ ------- -----------------

结论

React Disquss thread API是React社区中一个非常有用的工具，它可以让您轻松地将Disquss评论集成到您的应用程序中。在本教程中，我们探讨了如何安装和配置react-disqus-thread-api，以及如何使用其高级选项。请在您的应用程序中尝试使用Disquss评论，并通过访问我们的官方网站https://disqus.com/ 来了解更多关于Disquss评论的信息。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005557a81e8991b448d2a61

NPM包 react-disqus-thread-api 使用教程