如何在 React App 中嵌入 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>

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> 根据 documentation

如何在 React App 中嵌入 Google 自定义搜索？

How to embed Google Custom Search in React App?

javascript

google-custom-search

reactjs