如何在React组件中包含Google自定义搜索框 [英] How to include google custom search box in an React component

问题描述

我想在我的网站中添加一个Google自定义搜索框，该搜索框是使用ReactJS创建的.因此，用户可以在网站内和网络上搜索内容.

I would like to add a google custom search box in my site, which is created by using ReactJS. So the user can search content both within the site and on web.

Google生成的代码类似于:

The Google generated code is something like:

<script>
  (function() {
    var cx = '013626029679071:ze3ta4';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

是否可以将其添加到React组件中?它一直说SyntaxError.我试图为上面的代码创建一个组件，并在React组件中使用它，但是什么都没有显示.这是在React网站上添加搜索栏的正确方法吗?有提示吗?

Is there a way to add this into the React component? It keeps saying SyntaxError. I tried to create a component for the above code and use it in the React Component, but nothings shows up. Is this the right way to add a searchbar on React site? Any hints?

谢谢！

推荐答案

这完全适合我.如下所示，在您的react中添加一个form元素并修改代码段.反应回报.添加一个表单元素标签试试看.它对我有用.

This perfectly works for me. Add a form element in your react and modify the snippet as shown below. react return. Add a form element tag try it. it works for me.

<form method = "get" title = "Search Form" action="https://cse.google.com/cse/publicurl">
 <div>
    <input type="text" id="q" name="q" title="Search this site" alt="Search Text" maxlength="256" />
    <input type="hidden" id="cx" name="cx" value="013626029654558379071:ze3tw4csia4" />
   <input type="image" id="searchSubmit" name="submit" src="https://www.flaticon.com/free-icon/active-search-symbol_34148" alt="Go" title="Submit Search Query" />
 </div>
</form>

这篇关于如何在React组件中包含Google自定义搜索框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！