Использование плагина js для встраивания контента в компонент react / gatsby - PullRequest
Новая
       7

Использование плагина js для встраивания контента в компонент react / gatsby

0 голосов
/ 17 июня 2020

Я пытаюсь использовать сторонний плагин для ввода и встраивания списков вакансий в компонент React, но мне не очень везет. Может ли кто-нибудь пролить свет на то, почему это не работает? 

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;

1 Ответ

0 голосов
/ 17 июня 2020

Вам необходимо использовать компонент <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;

Это результат моей локальной машины:

External CSS loaded

External JS loaded

Поскольку необходимо отложить загрузку скрипта до загрузки DOM, вам нужно будет добавить что-то вроде gatsby-plugin-load-script does: 

// 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...