如何在指定React组件中嵌入Bing Custom Search HostedUI？

你遇到的问题核心在于三点：缺少HostedUI必需的渲染容器、脚本URL参数格式错误、脚本加载时机与DOM元素挂载时机不匹配。以下是修正后的可实现方案：

关键前提确认 #

先登录Bing Custom Search控制台，确认HostedUI配置里的容器ID（默认是bcs_container），组件里的容器ID必须和这个保持一致。

修正后的组件实现 #

import React, { useEffect, useRef } from 'react';

function ContainBrowseResults() {
  // 用ref绑定渲染容器，确保脚本加载时容器已挂载到DOM
  const searchContainerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!searchContainerRef.current) return;

    // 避免重复加载脚本，防止多次渲染时重复插入
    const existingScript = document.getElementById('bcs_js_snippet');
    if (existingScript) return;

    const script = document.createElement('script');
    script.id = 'bcs_js_snippet';
    script.type = 'text/javascript';
    // 替换<你的配置ID>为实际的Custom Search配置编号，确保参数格式正确
    script.src = 'https://ui.customsearch.ai/api/ux/rendering-js?customConfig=<你的配置ID>&market=en-US&version=latest&q=';
    script.async = true;

    // 捕获脚本加载错误，方便排查问题
    script.onerror = (error) => {
      console.error('Bing搜索脚本加载失败:', error);
    };

    document.body.appendChild(script);

    // 组件卸载时清理脚本和全局残留
    return () => {
      const scriptToRemove = document.getElementById('bcs_js_snippet');
      if (scriptToRemove) {
        document.body.removeChild(scriptToRemove);
        if ('bcs' in window) delete (window as any).bcs;
      }
    };
  }, []);

  return (
    <div className='ContainBrowseResults'>
      {/* 必须添加这个容器，ID要和控制台配置的完全一致 */}
      <div ref={searchContainerRef} id="bcs_container"></div>
    </div>
  );
}

export default ContainBrowseResults;

之前方案失效的原因 #

1. react-helmet方案：脚本被插入到head中，加载时机早于组件容器挂载，脚本找不到渲染目标，无法生成UI。
2. 自定义useScript方案：缺少必需的渲染容器，脚本加载后没有可挂载的DOM节点。
3. use-script包方案：URL参数格式错误（customConfig=<config-number>=en-US）导致请求无效，同时也未提供渲染容器。

额外注意事项 #

• 务必将URL中的<你的配置ID>替换为实际的配置编号，不要保留转义符<和>。
• 如果在控制台修改过容器ID，一定要同步修改组件里的容器ID。
• 测试前清除浏览器缓存，避免之前错误的脚本缓存影响结果。

内容的提问来源于stack exchange，提问作者sheesh