Question

我还没有找到涵盖此特定场景的示例：

我正在向我的 React 站点添加一个小部件，它使用如下脚本：

<script>(function(){ var s = document.createElement('script'), e = ! document.body ? document.querySelector('head') : document.body; s.src = 'https://acsbapp.com/apps/app/dist/js/app.js'; s.async = true; s.onload = function(){ acsbJS.init({ statementLink : '', footerHtml : '', hideMobile : false, hideTrigger : false, language : 'en', position : 'right', leadColor : '#146FF8', triggerColor : '#146FF8', triggerRadius : '50%', triggerPositionX : 'right', triggerPositionY : 'bottom', triggerIcon : 'people', triggerSize : 'medium', triggerOffsetX : 20, triggerOffsetY : 20, mobile : { triggerSize : 'small', triggerPositionX : 'right', triggerPositionY : 'bottom', triggerOffsetX : 10, triggerOffsetY : 10, triggerRadius : '50%' } }); }; e.appendChild(s);}());</script>

但是，我不明白将它添加到我的主文件中的最佳方法，如下所示：

const Theme = ({ state }) => {
  const data = state.source.get(state.router.link);
  
  return (
    <>
      <Head>
        <html lang="en" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{state.frontity.title}</title>
      </Head>

      <ThemeProvider theme={theme}>
        <Global styles={GlobalStyles} />
        <FontStyles />

        <Body>
          <Header />
          <Main>
            <Switch>
              <LoadingPage when={data.isFetching} />
              <Home when={data.isHome} />
              <ContactUs when={data.route === "/contact-us/"} />
            </Switch>
          </Main>
          <Footer />
        </Body>
      </ThemeProvider>
    </>
  );
};

export default connect(Theme);

进行这种集成的最佳方式是什么？

将第三方脚本添加到 React

0 个答案: