Question

我想在我的React应用程序中使用谷歌自定义搜索引擎。但是我有一个问题要应用它。

我在谷歌网站上查了代码是

<script>
  (function() {
    var cx = '008391824253360889328:j5posmpyok0';
    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中使用的jsx。

有人可以帮忙吗？感谢。

Answer 1

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

<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>

Answer 2

你不必改变任何东西。你可以直接运行它。

例如：

conponentDidMount() {
  (function() {
    var cx = '008391824253360889328:j5posmpyok0';
    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 async="true" src="https://cse.google.com/cse.js?cx=008391824253360889328:j5posmpyok0" type="text/javascript"></script>

Google自定义搜索引擎 - 使用ReactJS

2 个答案: