时间戳

首页 > 解决方案 > Using a js plugin to embed content in react/gatsby component

javascript - Using a js plugin to embed content in react/gatsby component

问题描述

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;

标签： javascriptreactjspluginsgatsby

解决方案

您需要使用该<Helmet>组件。根据Gatsby 关于 Helmet 的文档，React Helmet <Helmet>组件允许您插入一些代码，这些代码将在编译后放置在<head>标签内。

因此，您的代码应如下所示：

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;

这是我本地机器的输出：

加载外部 CSS

加载外部 JS

由于需要将脚本的加载推迟到 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
      },
    },
  ],
}

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

参考资料：https ://github.com/gatsbyjs/gatsby/issues/11013

推荐阅读