Question

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

Google生成的代码类似于：

<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网站上添加搜索栏的正确方法吗？任何提示？

谢谢！

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

我认为我有一个解决方案，而不使用dangerouslySetInnerHTML。将您的代码放在componentDidMount块中，并使用jQuery追加到元素，如下所示：

componentDidMount(){
const embedcode = `<script>
      (function() {
        var cx = '013626029654558379071:ze3tw4csia4';
        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>`

  $('#gsearch').html(embedcode)
  }

你的DOM元素：

<div id='gsearch'>
</div>

仍在调试一些样式的东西，但这很有效！

最佳，帕特里克

如何在React组件中包含Google自定义搜索框

2 个答案: