如何在 React 组件中包含谷歌自定义搜索框答案

【问题标题】：How to include google custom search box in an React component如何在 React 组件中包含谷歌自定义搜索框
【发布时间】：2017-01-10 20:29:22
【问题描述】：

我想在我的网站中添加一个谷歌自定义搜索框，它是使用 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 网站上添加搜索栏的正确方法吗？有什么提示吗？

谢谢！

【问题讨论】：

是的，当然...在render方法中将html标签“gcse:search”包裹在一个div中，并在组件的方法componentdidmount中触发匿名函数的代码，好吗？
如果这不起作用，您可以使用 refs 替换 vanilla javascript 访问 dom 元素。更多信息：facebook.github.io/react/docs/refs-and-the-dom.html
@chemitaxis 感谢您的回复，但包装 html 标签“gsce:search”不起作用，因为它有错误“不支持命名空间标签。ReactJSX 不是 XML。”你以前这样做过吗？
不，我没有...您是否危险地测试了SetInnerHTML？
我认为这是你无法做到的时刻......你的独特选择是使用这个：dangerousSetInnerHTML

标签： javascript reactjs google-search

【解决方案1】：

我想我有一个不使用危险SetInnerHTML 的解决方案。将您的代码放入 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>

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

最好，帕特里克

【讨论】：

【解决方案2】：

这非常适合我。在您的反应中添加一个表单元素并修改 sn-p，如下所示。反应返回。添加一个表单元素标签试试吧。它对我有用。

<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 中工作。