谷歌可编程搜索栏不显示，除非我按下重新加载

Question

所以我对谷歌产品很陌生。我只是在学习 adSense、分析和搜索栏。

我正在使用基于 React 的项目。 我已按照公共 html 中的要求将代码添加到正文中，并将搜索栏添加到我的网站。

    <!-- <script 
     async 
     src="https://cse.google.com/cse.js?cx=cxxxx" 
     ></script> -->

但我无法让它稳定下来。我必须不断重新加载，我无法控制大小

重新加载 使用反应版本。 很多谷歌

Answer 1

您的 React 项目中似乎遇到了 Google 自定义搜索集成问题。为了帮助您解决这个问题，我将提供有关如何在 React 应用程序中集成 Google 自定义搜索引擎 (CSE) 的分步指南：

1. 首先，为搜索栏创建一个新的 React 组件：

// src/components/GoogleSearch.js

import React, { useEffect } from 'react';

const GoogleSearch = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cse.google.com/cse.js?cx=YOUR_CX_CODE';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div className="gcse-search"></div>
  );
};

export default GoogleSearch;

用您自己的 cx 代码替换 YOUR_CX_CODE。

1. 在您的主应用程序或您希望搜索栏出现的任何其他组件中导入并使用 GoogleSearch 组件：

// src/App.js or any other component

import React from 'react';
import GoogleSearch from './components/GoogleSearch';

function App() {
  return (
    <div className="App">
      <h1>Google Custom Search Integration</h1>
      <GoogleSearch />
    </div>
  );
}

export default App;

通过执行这些步骤，您应该在 React 项目中拥有稳定的 Google 自定义搜索集成，而无需不断重新加载。如果您仍然遇到问题，请提供有关错误消息或您遇到的问题的更多详细信息。