简介
react-freshdesk-widget-query-string 是一个 React 组件，用于将 URL 查询参数传递给 Freshdesk 可嵌入小部件的查询字符串。这特别适用于那些想在他们的网站或应用中嵌入 Freshdesk 的小部件。
安装
要安装 react-freshdesk-widget-query-string，请在终端中运行以下命令：
npm install react-freshdesk-widget-query-string
用法
要在 React 应用程序中使用 react-freshdesk-widget-query-string，请先导入它：
import FreshdeskWidgetQueryString from 'react-freshdesk-widget-query-string';
然后，在你的组件中渲染它：
function App () {
return (
<FreshdeskWidgetQueryString
url='https://your-company.freshdesk.com/widgets/feedback_widget/new?&widgetType=feedback&placeholder=Enter your feedback'
/>
)
}请注意，要使用此组件，您需要提供一个有效的 Freshdesk URL，其中包括查询参数。
示例
下面是一个示例，它演示了如何使用 react-freshdesk-widget-query-string 组件。它包括一个简单的 React 应用程序，其中包括一个表单，用户可以在该表单中输入他们的名称和电子邮件地址。当用户提交表单时，它将其名称和电子邮件地址作为查询参数传递给 Freshdesk。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------------------------- ---- --------------------------------------
------ ------- -------- ----- -
----- ------ -------- - -------------
----- ------- --------- - -------------
----- ---------------- - - -- -
-------------------
----- ----------- - -----------------------------------------------------------------------
----- --- - ------------------------------------------------------------------------------------------------------ ---- ------------------------
-------------------- - ----
--
------ -
--
----- ----------------------------
------ ----------------------------
------ --------- ----------- ------------ ----------- -- ------------------------ --
------ ------------------------------
------ ---------- ------------ ------------- ----------- -- ------------------------- --
------- -----------------------------
-------
---------------------------
---------------------------------------------------------------------------------------------------------- ---- ---------
--
---
--
-在这个例子中，当用户提交表单时，它会将名称和电子邮件地址编码为查询参数，并将它们添加到 URL 中传递给 freshdesk-widget-query-string 组件。此组件将查询参数添加到 Freshdesk 可嵌入小部件的 URL 中，以便正确设置反馈部件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d09270238226a9