reactjs - 在特定的 React 组件中实现 Bing 自定义搜索 HostedUI 脚本元素

Question

我是网络开发新手，第一次发布海报...

我正在尝试在 React 组件内部使用 Bing Custom Search HostedUI(我希望不必使用 Web API)，以便将其放置在特定位置。我不想使用angerouslySetInnerHtml，因为我读到这是不好的做法。

我已经设置了自定义搜索实例，当我在index.html 文件中使用脚本标记时，一切正常(除了不在我想要的位置之外)。但是，当我尝试在 react 组件中实现脚本标记时，它显示此错误:

Script error.at handleError (http://localhost:3000/static/js/bundle.js:51198:58)at http://localhost:3000/static/js/bundle.js:51217:7

我尝试了多种方法，包括使用react-helmet、使用useEffect更改DOM以及使用use-script包。

使用 react Helm

import React from 'react'
import { Helmet } from "react-helmet"

function ContainBrowseResults() {
  
    return (
    <div>
  
    <Helmet>
        <script type="text/javascript" 
            id="bcs_js_snippet"
            src="https://ui.customsearch.ai/api/ux/rendering-js?customConfig=<config-number>&market=en-US&version=latest&q=">
            async
        </script>
    </Helmet>

    </div>
  )
}

使用 useEffect 插入到 DOM 中(现在我想这可能偏离目标)

// useScript.ts

import { useEffect } from 'react';

const useScript = (type:string, id:string, src:string) => {

  useEffect(() => {
    const script = document.createElement('script');

    script.type=type;
    script.id=id;
    script.src = src;
    script.async = false;

    document.body.appendChild(script);

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

export default useScript;

//ContainBrowseResults.tsx

import React from 'react'
import useScript from '../../hooks/useScript'

function ContainBrowseResults() {

    useScript("text/javascript", "bcs_js_snippet", "https://ui.customsearch.ai/api/ux/rendering-js?customConfig=<config-number>&market=en-US&version=latest&q=")
  
    return (
    <div></div>
  )
}

export default ContainBrowseResults

使用 use-script

import React from 'react'
// import useScript from '../../hooks/useScript'
import useScript, { ScriptStatus } from '@charlietango/use-script'


function ContainBrowseResults() {

    const [ready, status] = useScript("https://ui.customsearch.ai/api/ux/rendering-js?customConfig=<config-number>=en-US&version=latest&q=")
    if (status === ScriptStatus.ERROR) {
      return <div>Failed to load API</div>
    }

    return (
    <div className='ContainBrowseResults'>
        {ready}
    </div>
  )
}

export default ContainBrowseResults

我希望这些能够在 ContainBrowseResults 组件内(在我的页眉和页脚之间)呈现 Bing 自定义搜索 HostedUI(搜索栏和搜索结果)。

任何帮助将不胜感激!

Answer 1

您不应该尝试通过 React 组件添加脚本标记。它们应该在页面加载时执行，而不是在安装组件时执行。

从您的问题的声音来看，您似乎想在网络应用程序中加载外部网页。看看针对您的情况使用 iframe。阅读有关托管 UI 的文档后，您应该有一个可访问的链接以及此 <script />您尝试使用的元素。您应该能够执行以下操作:

function ContainBrowseResults() {
  // Remember to replace YOUR-CUSTOM-CONFIG-ID with your own id
  return (
    <div>
      <iframe
        src="https://ui.customsearch.ai/hosted?customConfig=YOUR-CUSTOM-CONFIG-ID"
        title="YOUR_SEARCH_BOX"
      >
      </iframe>
    </div>
  )
}

引用文档: https://learn.microsoft.com/en-us/azure/cognitive-services/bing-custom-search/hosted-ui