什么是 @types/react-mailchimp-subscribe
@types/react-mailchimp-subscribe 是一个 React 组件的 npm 包,用于在 React 应用中添加 Mailchimp 订阅表单。
如何使用 @types/react-mailchimp-subscribe
安装
使用 npm 安装 @types/react-mailchimp-subscribe:
npm install --save @types/react-mailchimp-subscribe
导入
在项目的组件中导入 @types/react-mailchimp-subscribe:
import MailchimpSubscribe from '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