介绍
scrivito-mailchimp-widget 是一个基于 npm 模块开发的，方便在 WordPress 页面上添加 mailchimp 订阅表单的小部件。它是专为 scrivito 所开发的，也可以用于其他基于 React.js 的应用。scrivito-mailchimp-widget 具有易于定制的特性，可用于将订阅表单嵌入到网站的任何部分。
安装
scrivito-mailchimp-widget 是一个 npm 包，可以通过以下命令进行安装：
npm install scrivito-mailchimp-widget --save
：
在 React 组件中，导入 scrivito-mailchimp-widget 和所有相关的 Mailchimp API。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------------ - ---- ----------------------------
------ ------------- ---- ----------------------------
----- --- ------- --------- -
-------- -
----- --- - --------------------------------------- -- - --------- --- -- ---- -----------
------ -
---- ----------------
------------------- --------- -
-------------- --
---------------------
------
--
-
-
------ ------- ----MailchimpSubscribe 是 react-mailchimp-subscribe 包中的组件，它使用 Mailchimp API 进行后端通信，MailchimpForm 是scrivito-mailchimp-widget 中的订阅表单的显示组件，需要在 MailchimpSubscribe 组件中进行使用。
使用
使用 scrivito-mailchimp-widget 的订阅表单的基本用法是通过 react-mailchimp-subscribe 公开的 MailchimpSubscribe 组件，可以调用 MailchimpForm 显示它。
在 React 组件中定义 MailchimpSubscribe 和 MailchimpForm 组件。使用 MailchimpSubscribe 中公开的 url 参数向 Mailchimp API 发送 POST 请求订阅列表的请求端点。在 MailchimpForm 组件中定义所需的订阅表单字段和样式，并使用 react-bootstrap 包含它们。
以下示例代码为一个简单的订阅表单：
-- -------------------- ---- -------
------ --------- ---- -------------
------ - ---- ------- ---- - ---- ------------------
----- ------------- - -- ------- -------- ----------- -- -- -
--- ------
--- ------
--- ------
----- ------ - -- --
----- --
----- --
----- --
------------------------ - -- --
-------------
------ ------------
------ ------------
------ -----------
---
------ -
------
----------
----------- -------- --------------------------
------------------------------
-------------
------------
------------------ ------
--------- -- ------ - ------
--
-------------
----------- -------- ------------------------------
----------------- -----------------
-------------
-----------
------------------ -----
--------- -- ------ - ------
--
-------------
----------- -------- -----------------------------
---------------- -----------------
-------------
-----------
----------------- -----
--------- -- ------ - ------
--
-------------
------- ---------------- ------------------
---------
---------
-----------
------- --- --------- -- ---- -------- ------ ------ --------------------
------- --- ------- -- -
----
-------- ------ ----- --
-------------------------- ------- ------- --
--
--
------- --- --------- -- -
----
-------- ------ ------- --
-------------------------- ------- ------- --
--
--
-------
--
--
----------------------- - -
------- ----------------------------
-------- ----------------------------
------------ -------------------------
--
------ ------- --------------
参考资源
- https://www.npmjs.com/package/scrivito-mailchimp-widget
- https://github.com/grewind/scrivito-mailchimp-widget
- https://github.com/thinkshout/react-mailchimp-subscribe
- https://react-bootstrap.github.io/components/forms/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067355890c4f7277583aaa