gatsby - Google Recaptcha & Gatsby 错误:reCAPTCHA 占位符元素必须是元素或 id
问题描述
我正在尝试将 recaptcha v2 添加到我的 Gatsby/Netlify 站点表单中,但我错过了实际显示小部件的最后一部分。它只是没有显示它的放置位置。
到目前为止,我的代码是这样的
gatsby-ssr.js 文件:
import React from "react"
export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
setHeadComponents([
<script
dangerouslySetInnerHTML={{
__html: `
function onloadCallback() {
grecaptcha.render(document.getElementById('g-recaptcha'), {
"sitekey": '6LfMWLkaAAAAAFYM11ctU1Dxfz_v3SVrAKLOR3rM',
})
}
`,
}}
/>,
])
setPostBodyComponents([
<script
key="abc"
type="text/javascript"
src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async
defer1
/>,
])
}
以及联系方式:
<Form className="contact-form" method="post" data-netlify-recaptcha="true" data-netlify="true" netlify-honeypot="bot-field">
...
<p className="hidden">
<label>Don’t fill this out if you’re human: <input name="bot-field" /></label>
</p>
...
<Form.Group id="recaptcha-container">
<div id="g-recaptcha" className="g-recaptcha" data-netlify-recaptcha="true" render="explicit"></div>
</Form.Group>
...
</Form>
在我将任何 Netlify 属性添加到我的表单之前,出现了错误“未捕获(承诺)错误:reCAPTCHA 占位符元素必须是元素或 id”,所以我很确定这与它无关。
有任何想法吗?谢谢。
解决方案
我认为您的问题是您将脚本直接嵌入到 React 的范围之外,因此它在加载时永远不会再水化。最简单的方法是添加react-google-recaptcha
组件:
<Form className="contact-form" method="post" data-netlify-recaptcha="true" action="/" data-netlify="true" netlify-honeypot="bot-field">
...
<p className="hidden">
<label>Don’t fill this out if you’re human: <input name="bot-field" /></label>
</p>
...
<Form.Group id="recaptcha-container">
<ReCAPTCHA
sitekey="Your client site key"
onChange={onChange}
/>,
</Form.Group>
...
</Form>
正如我所说,我认为您不需要gatsby-ssr.js
实现,您可以通过添加 React 组件来实现更原生的实现,如上面的代码片段所示。您需要获取该值并将其发送到 Netlify 请求。我也建议您action
在表单组件中设置一个。
您还缺少表单的一个关键属性:name
. 没有它,Netlify 永远不会知道您的表单是如何命名的,也不会在仪表板中显示它(您也需要发送它)。
请记住,reCAPTCHA 永远不会在本地加载,除非您将后台配置为接受本地请求 ( 127.0.0.1
)。
有用的资源:
推荐阅读
- python - Matplotlib“缩放到矩形”在薄矩形上不能很好地缩放
- docker - 使用 Elk 堆栈浏览 nginx 和 tomcat 日志文件的 Docker 容器
- javascript - 将参数传递给 Vuex 中的 mapGetters
- docker - 问题:将 Docker 移植到新平台(Tizen 4.0 + ARM64)
- c - 使用指针数组的内存映射外设寄存器
- binding - 为什么 DisableBind 会引发 Invalid cursor state 错误?
- label - 如何在 Shopify 中更改尺寸选项的标签?
- javascript - JS - Array.prototype.clone 向所有数组添加一个元素
- java - iText7.1.3 将 SVG 添加到 PdfDocument
- python - 编辑熊猫数据框中的重复项