如何在React应用程序中嵌入Google自定义搜索？

Question

我需要在React应用程序中嵌入一个JS小部件，有没有办法做到这一点？

该JS小部件是Google自定义搜索：

  (function() {
    var cx = '111:xxx';
    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);
  })();

<gcse:search></gcse:search>

- markkazanski

Answer 1

使用componentDidMount

componentDidMount() {
  (function() {
    var cx = '111:xxx';
    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);
  })();
}

并使用

<div class="gcse-searchbox" data-resultsUrl="http://www.example.com"
data-newWindow="true" data-queryParameterName="search" />`

根据文档，应该使用 <gcse:search></gcse:search> 的替代方法。

- evgeni fotia

---

当组件卸载时，清理工作怎么做？重新挂载这样的组件时，这种处理方式是否起作用？ - user6019272

Answer 2

为了进一步阐述@MiguelSlv所写的内容...

地点：

(function() {
    var cx = '111:xxx';
    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);
  })(),

在你的App.js文件中，添加以下代码：

<script async src="https://cse.google.com/cse.js?cx=111:xxx">

在您网站的任何正文部分放置搜索框。

- Oladipupo Bùnmi