npm 包 @types/react-mailchimp-subscribe 使用教程

阅读时长 6 分钟读完

什么是 @types/react-mailchimp-subscribe

@types/react-mailchimp-subscribe 是一个 React 组件的 npm 包,用于在 React 应用中添加 Mailchimp 订阅表单。

如何使用 @types/react-mailchimp-subscribe

安装

使用 npm 安装 @types/react-mailchimp-subscribe:

导入

在项目的组件中导入 @types/react-mailchimp-subscribe:

使用

@types/react-mailchimp-subscribe 提供了两个组件:

  • Subscribe: 提供了一个包装器,用于将其他组件包装成 Mailchimp 订阅表单;
  • CustomForm: 可以使用自定义的表单作为订阅表单。

Subscribe

使用 Subscribe 组件需要先在 Mailchimp 中创建一个 Audience(听众)。

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

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

上述代码中,url 表示 Mailchimp 中的列表订阅地址,render 接收三个参数:

  • subscribe: 用于提交表单的方法;
  • status: 当前状态;
  • message: 当前状态的信息。

CustomForm

使用 CustomForm 组件可以自己创建表单样式。

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

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

onSubmitting

可以使用 onSubmitting 属性,在提交时添加一些额外的数据。

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

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

示例代码

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

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

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

总结

使用 @types/react-mailchimp-subscribe 可以方便地在 React 应用中添加 Mailchimp 订阅表单,同时其使用方法也非常简单。通过本文的介绍和示例代码,相信读者已经可以熟练使用 @types/react-mailchimp-subscribe 了。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedc172b5cbfe1ea0611dda

纠错
反馈