在 ReactJS/GatsbyJS 中使用外部脚本中的函数答案

【问题标题】：Use Function From External Script In ReactJS/GatsbyJS在 ReactJS/GatsbyJS 中使用外部脚本中的函数
【发布时间】：2021-08-28 20:08:10
【问题描述】：

我有一个脚本，它动态插入到网站头部的表单元素的焦点上，这是为了页面加载目的而完成的。负载不使用反应头盔，而是通过做基本的香草js

const handleFocus = () =>
{
    if (!loaded)
    {
        setScriptLoaded(true);
        const script = document.createElement('script');
        script.src = 'https://hcaptcha.com/1/api.js';
        script.async = true;
        script.defer = true;
        document.head.appendChild(script);
    }
};

这没有任何问题。我想做的是在提交处理程序中调用 hcaptcha.reset() 函数。我可以确认从浏览器调用该方法确实有效

const formSubmit = async (e) =>
{
    window.hcaptcha.reset();
}

这样做会在 gatsby 中引发很多错误

Unknown Runtime Error

Objects are not valid as a React child (found: [object Response]). If you meant to render a collection of children, use an array instead.
:

No codeFrame could be generated

如何调用 hcaptcha 的 .reset() 方法从反应中不出错？

【问题讨论】：

标签： javascript reactjs gatsby captcha

【解决方案1】：

假设你没有返回一个空的 JSX 语句，可以通过将它包装在任何标签中来修复它（甚至是空标签<>）：

return (
    <>
        {yourResponse}
    </>

您可能想要：

const formSubmit = async (e) => {
   return window.hcaptcha.reset();
}

或者使用隐式返回

const formSubmit = async (e) =>  return window.hcaptcha.reset();

【讨论】：