使用 js 插件在 react/gatsby 组件中嵌入内容

Question

I'm trying to use a third-party plugin to bring in and embed job listings into a react component but I'm not having much luck.我正在尝试使用第三方插件来引入工作列表并将其嵌入到反应组件中，但我运气不佳。 Could anybody shed a little light into why this isn't working?有人可以解释一下为什么这不起作用吗？

import React from "react"

class CareersEmbed extends React.Component {

  render() {
    return (
      <div>
        <link rel="stylesheet" href="https://css.zohostatic.com/recruit/embed_careers_site/css/v1.0/embed_jobs.css" type="text/css"/>
        <div className="embed_jobs_head embed_jobs_with_style_1 embed_jobs_with_style">
          <div className="embed_jobs_head2">
            <div className="embed_jobs_head3">
              <div id="rec_job_listing_div"></div>
              <script type="text/javascript" src="https://js.zohostatic.com/recruit/embed_careers_site/javascript/v1.0/embed_jobs.js"></script>
              <script type="text/javascript" 
                dangerouslySetInnerHTML={{
                __html: `rec_embed_js.load({
                  widget_id:"rec_job_listing_div",
                  page_name:"Careers",
                  source:"CareerSite",
                  site:"https://examplesite",
                  empty_job_msg:"No current Openings"
                });
                `
                }}
              ></script>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default CareersEmbed;

Answer 1

You need to use the <Helmet> component.您需要使用<Helmet>组件。 According to Gatsby documentation about Helmet , and React Helmet <Helmet> component allows you to insert a few code that will be placed after compilation inside the <head> tag.根据Gatsby 关于 Helmet 的文档， React Helmet <Helmet>组件允许您插入一些代码，这些代码将在编译后放置在<head>标记内。

So, your code should look like something like this:因此，您的代码应如下所示：

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

class CareersEmbed extends React.Component {

  render() {
    return (
    <Helmet>
      <link rel="stylesheet" href="https://css.zohostatic.com/recruit/embed_careers_site/css/v1.0/embed_jobs.css"
        type="text/css" />
      <script type="text/javascript"
          src="https://js.zohostatic.com/recruit/embed_careers_site/javascript/v1.0/embed_jobs.js" />
      <script type="text/javascript" async
          dangerouslySetInnerHTML={{
            __html: `rec_embed_js.load({
                  widget_id:"rec_job_listing_div",
                  page_name:"Careers",
                  source:"CareerSite",
                  site:"https://examplesite",
                  empty_job_msg:"No current Openings"
                });
                `,
          }}/>
    </Helmet>
      <div>
        <div className="embed_jobs_head embed_jobs_with_style_1 embed_jobs_with_style">
          <div className="embed_jobs_head2">
            <div className="embed_jobs_head3">
              <div id="rec_job_listing_div"></div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default CareersEmbed;

This is the output from my local machine:这是我本地机器上的 output：

Since the needs are to defer the load of the script until the DOM is loaded, you will need to add to something like gatsby-plugin-load-script does:由于需要将脚本的加载推迟到加载 DOM 之前，您需要添加类似gatsby-plugin-load-script的内容：

// gatsby-config.js
module.exports = {
  plugins: [
    // ...
    {
      resolve: 'gatsby-plugin-load-script',
      options: {
        src: 'https://js.zohostatic.com/recruit/embed_careers_site/javascript/v1.0/embed_jobs.js"',
    onLoad: `() => Sentry.init({dsn:"${process.env.SENTRY_DSN}"})`, // your stuff
      },
    },
  ],
}

Plugin documentation: https://www.gatsbyjs.org/packages/gatsby-plugin-load-script/插件文档： https://www.gatsbyjs.org/packages/gatsby-plugin-load-script/

References: https://github.com/gatsbyjs/gatsby/issues/11013参考文献： https://github.com/gatsbyjs/gatsby/issues/11013

Answer 2

I did run into the same issue by trying to add those Job Listings from Zoho too (using Gatsby).通过尝试从 Zoho 添加这些职位列表（使用 Gatsby），我确实遇到了同样的问题。

The solution I've found was to adapt this article to our needs: https://rangen.medium.com/dynamically-load-google-scripts-with-react-and-the-useeffect-hook-3700b908e50f我找到的解决方案是使这篇文章适应我们的需求： https://rangen.medium.com/dynamically-load-google-scripts-with-react-and-the-useeffect-hook-3700b908e50f

So in the end it's like this, and loads only on this component:所以最后它是这样的，并且只在这个组件上加载：

const Careers = () => {
  const [scriptLoaded, setScriptLoaded] = useState(false);

  useEffect(() => {
    const careerScript = document.createElement('script');
    careerScript.src =
      'https://js.zohostatic.com/recruit/embed_careers_site/javascript/v1.0/embed_jobs.js';
    careerScript.addEventListener('load', () => setScriptLoaded(true));
    document.body.appendChild(careerScript);
  }, []);

  useEffect(() => {
    if (!scriptLoaded) return;

    rec_embed_js.load({
      widget_id: 'rec_job_listing_div',
      page_name: 'Careers',
      source: 'CareerSite',
      site: 'https://*******.zohorecruit.com',
      empty_job_msg: 'No current Openings',
    });
  }, [scriptLoaded]);

  return (
    <Box px={['0px', '20px']}>
      <link
        rel="stylesheet"
        href="https://css.zohostatic.com/recruit/embed_careers_site/css/v1.0/embed_jobs.css"
        type="text/css"
      />
      <div className="embed_jobs_head embed_jobs_with_style_1 embed_jobs_with_style">
        <div className="embed_jobs_head2">
          <div className="embed_jobs_head3">
            <div id="rec_job_listing_div" />
          </div>
        </div>
      </div>
    </Box>
  );
};

使用 js 插件在 react/gatsby 组件中嵌入内容

问题描述

2 个解决方案

解决方案1
0 2020-06-17 16:35:40

解决方案2
0 2021-09-14 17:47:48

使用 js 插件在 react/gatsby 组件中嵌入内容

问题描述

2 个解决方案

解决方案1 0 2020-06-17 16:35:40

解决方案2 0 2021-09-14 17:47:48

解决方案1
0 2020-06-17 16:35:40

解决方案2
0 2021-09-14 17:47:48