ฉันมีปัญหาที่ค่อนข้างตรงไปตรงมาในการพยายามเพิ่มสคริปต์แบบอินไลน์ให้กับองค์ประกอบ React สิ่งที่ฉันมี:

'use strict';

import '../../styles/pages/people.scss';

import React, { Component } from 'react';
import DocumentTitle from 'react-document-title';

import { prefix } from '../../core/util';

export default class extends Component {
    render() {
        return (
            <DocumentTitle title="People">
                <article className={[prefix('people'), prefix('people', 'index')].join(' ')}>
                    <h1 className="tk-brandon-grotesque">People</h1>

                    <script src="https://use.typekit.net/foobar.js"></script>
                    <script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script>
                </article>
            </DocumentTitle>
        );
    }
};

ฉันได้ลองด้วย:

<script src="https://use.typekit.net/foobar.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

ดูเหมือนว่าทั้งวิธีการรันสคริปต์ที่ต้องการ ฉันเดาว่ามันเป็นเรื่องง่ายที่ฉันคิดถึง ใครช่วยได้บ้าง

PS: ไม่สนใจ foobar ฉันมีรหัสจริงที่ใช้งานอยู่ซึ่งฉันไม่รู้สึกอยากแบ่งปัน

แก้ไข: สิ่งต่าง ๆ เปลี่ยนแปลงอย่างรวดเร็วและสิ่งนี้ล้าสมัย - ดูการอัปเดต

คุณต้องการดึงข้อมูลและเรียกใช้งานสคริปต์ซ้ำแล้วซ้ำอีกทุกครั้งที่มีการแสดงผลคอมโพเนนต์นี้หรือเพียงแค่ครั้งเดียวเมื่อติดตั้งคอมโพเนนต์นี้ลงใน DOM

อาจลองทำสิ่งนี้:

componentDidMount () {
    const script = document.createElement("script");

    script.src = "https://use.typekit.net/foobar.js";
    script.async = true;

    document.body.appendChild(script);
}

อย่างไรก็ตามสิ่งนี้มีประโยชน์มากหากสคริปต์ที่คุณต้องการโหลดไม่สามารถใช้งานได้ในโมดูล / แพ็คเกจ ก่อนอื่นฉันจะ:

• มองหาแพ็คเกจในเวลา 23.00 น
• ดาวน์โหลดและติดตั้งแพ็คเกจในโครงการของฉัน ( npm install typekit)
• importแพ็คเกจที่ฉันต้องการ ( import Typekit from 'typekit';)

นี่คือแนวโน้มว่าคุณติดตั้งแพคเกจreactและreact-document-titleจากตัวอย่างของคุณและมีความเป็นแพคเกจที่มีอยู่บน Typekit NPM

ปรับปรุง:

ตอนนี้เรามี hooks วิธีการที่ดีกว่าอาจใช้useEffectดังนี้:

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

  script.src = "https://use.typekit.net/foobar.js";
  script.async = true;

  document.body.appendChild(script);

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

ซึ่งทำให้เป็นตัวเลือกที่ยอดเยี่ยมสำหรับตะขอที่กำหนดเอง (เช่น:) hooks/useScript.js:

import { useEffect } from 'react';

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

    script.src = url;
    script.async = true;

    document.body.appendChild(script);

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

export default useScript;

ซึ่งสามารถใช้เช่น:

import useScript from 'hooks/useScript';

const MyComponent = props => {
  useScript('https://use.typekit.net/foobar.js');

  // rest of your component
}

นอกเหนือจากคำตอบข้างต้นคุณสามารถทำสิ่งนี้:

import React from 'react';

export default class Test extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.innerHTML = "document.write('This is output by document.write()!')";
    this.instance.appendChild(s);
  }

  render() {
    return <div ref={el => (this.instance = el)} />;
  }
}

div ถูกผูกไว้กับ thisและสคริปต์ถูกแทรกเข้าไป

สามารถดูตัวอย่างได้ที่codesandbox.io

วิธีที่ฉันโปรดปรานคือใช้ React Helmet - เป็นส่วนประกอบที่ช่วยให้จัดการหัวเอกสารได้ง่ายในแบบที่คุณคุ้นเคย

เช่น

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

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <script src="https://use.typekit.net/foobar.js"></script>
                <script>try{Typekit.load({ async: true });}catch(e){}</script>
            </Helmet>
            ...
        </div>
    );
  }
};

https://github.com/nfl/react-helmet

หากคุณจำเป็นต้องมี<script>บล็อกใน SSR (การเรนเดอร์ฝั่งเซิร์ฟเวอร์) วิธีการด้วยcomponentDidMountจะไม่ทำงาน

คุณสามารถใช้react-safeห้องสมุดแทน รหัสใน React จะเป็น:

import Safe from "react-safe"

// in render 
<Safe.script src="https://use.typekit.net/foobar.js"></Safe.script>
<Safe.script>{
  `try{Typekit.load({ async: true });}catch(e){}`
}
</Safe.script>

คำตอบที่Alex Mcmillanให้ไว้ช่วยฉันได้มากที่สุด แต่ก็ไม่ค่อยได้ผลสำหรับแท็กสคริปต์ที่ซับซ้อนกว่านี้

ฉันปรับแต่งคำตอบของเขาเล็กน้อยเพื่อหาคำตอบสำหรับแท็กที่มีความยาวพร้อมฟังก์ชั่นต่าง ๆ ที่ตั้งค่า "src" เพิ่มเติม

(สำหรับกรณีการใช้งานของฉันสคริปต์จำเป็นต้องอาศัยอยู่ในหัวซึ่งสะท้อนให้เห็นที่นี่เช่นกัน):

  componentWillMount () {
      const script = document.createElement("script");

      const scriptText = document.createTextNode("complex script with functions i.e. everything that would go inside the script tags");

      script.appendChild(scriptText);
      document.head.appendChild(script);
  }

ฉันสร้างองค์ประกอบ React สำหรับกรณีเฉพาะนี้: https://github.com/coreyleelarson/react-typekit

เพียงแค่ต้องส่งผ่าน Typekit Kit ID ของคุณเป็นเสาและคุณก็พร้อมที่จะไป

import React from 'react';
import Typekit from 'react-typekit';

const HtmlLayout = () => (
  <html>
    <body>
      <h1>My Example React Component</h1>
      <Typekit kitId="abc123" />
    </body>
  </html>
);

export default HtmlLayout;

Range.createContextualFragmentมีวิธีแก้ปัญหาที่ดีมากในการใช้คือ

/**
 * Like React's dangerouslySetInnerHTML, but also with JS evaluation.
 * Usage:
 *   <div ref={setDangerousHtml.bind(null, html)}/>
 */
function setDangerousHtml(html, el) {
    if(el === null) return;
    const range = document.createRange();
    range.selectNodeContents(el);
    range.deleteContents();
    el.appendChild(range.createContextualFragment(html));
}

งานนี้สำหรับพล HTML document.currentScriptและยังคงรักษาข้อมูลบริบทเช่น

คุณสามารถใช้npm postscribeเพื่อโหลดสคริปต์ในองค์ประกอบการตอบสนอง

postscribe('#mydiv', '<script src="https://use.typekit.net/foobar.js"></script>')

คุณยังสามารถใช้หมวกนิรภัยตอบโต้

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

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://example.com/example" />
                <script src="/path/to/resource.js" type="text/javascript" />
            </Helmet>
            ...
        </div>
    );
  }
};

Helmet ใช้แท็ก HTML ธรรมดาและส่งแท็ก HTML ธรรมดา มันง่ายมากและตอบโต้ผู้เริ่มต้นเป็นมิตร

สำหรับสคริปต์หลายตัวให้ใช้สิ่งนี้

var loadScript = function(src) {
  var tag = document.createElement('script');
  tag.async = false;
  tag.src = src;
  document.getElementsByTagName('body').appendChild(tag);
}
loadScript('//cdnjs.com/some/library.js')
loadScript('//cdnjs.com/some/other/library.js')

componentDidMount() {
  const head = document.querySelector("head");
  const script = document.createElement("script");
  script.setAttribute(
    "src",
    "https://assets.calendly.com/assets/external/widget.js"
  );
  head.appendChild(script);
}

คุณสามารถหาคำตอบที่ดีที่สุดได้ที่ลิงค์ต่อไปนี้:

https://cleverbeagle.com/blog/articles/tutorial-how-to-load-third-party-scripts-dynamically-in-javascript

const loadDynamicScript = (callback) => {
const existingScript = document.getElementById('scriptId');

if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'url'; // URL for the third-party library being loaded.
    script.id = 'libraryName'; // e.g., googleMaps or stripe
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

ตามวิธีการแก้ปัญหาของAlex McMillanฉันมีการปรับตัวต่อไปนี้
สภาพแวดล้อมของฉัน: ทำปฏิกิริยา 16.8+, v9 ต่อไป

// เพิ่มองค์ประกอบที่กำหนดเองชื่อ Script
// hooks / Script.js

import { useEffect } from 'react'

const useScript = (url, async) => {
  useEffect(() => {
    const script = document.createElement('script')

    script.src = url
    script.async = (typeof async === 'undefined' ? true : async )

    document.body.appendChild(script)

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

export default function Script({ src, async=true}) {

  useScript(src, async)

  return null  // Return null is necessary for the moment.
}

// ใช้ compoennt ที่กำหนดเองเพียงแค่นำเข้ามันและแทนที่<script>แท็กตัวพิมพ์เล็กเก่าด้วย<Script>แท็กเคสอูฐที่กำหนดเองจะพอเพียง
// index.js

import Script from "../hooks/Script";

<Fragment>
  {/* Google Map */}
  <div ref={el => this.el = el} className="gmap"></div>

  {/* Old html script */}
  {/*<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>*/}

  {/* new custom Script component */}
  <Script src='http://maps.google.com/maps/api/js' async={false} />
</Fragment>

สายไปงานเลี้ยง แต่ฉันตัดสินใจที่จะสร้างของตัวเองหลังจากดูที่ @Alex Macmillan คำตอบและนั่นคือโดยการผ่านสองพารามิเตอร์พิเศษ; ตำแหน่งที่จะวางสคริปต์เช่นหรือและการตั้งค่า async ให้เป็นจริง / เท็จนี่คือ:

import { useEffect } from 'react';

const useScript = (url, position, async) => {
  useEffect(() => {
    const placement = document.querySelector(position);
    const script = document.createElement('script');

    script.src = url;
    script.async = typeof async === 'undefined' ? true : async;

    placement.appendChild(script);

    return () => {
      placement.removeChild(script);
    };
  }, [url]);
};

export default useScript;

วิธีการโทรนั้นจะเหมือนกับที่แสดงในคำตอบที่ยอมรับของโพสต์นี้ แต่มีพารามิเตอร์พิเศษ (อีกครั้ง) สองพารามิเตอร์:

// First string is your URL
// Second string can be head or body
// Third parameter is true or false.
useScript("string", "string", bool);

ในการนำเข้าไฟล์ JS ในโครงการตอบสนองให้ใช้คำสั่งนี้

1. ย้ายไฟล์ JS ไปที่โครงการ
2. อิมพอร์ต js ไปยังหน้าโดยใช้คำสั่งต่อไปนี้

มันง่ายและสะดวก

import  '../assets/js/jquery.min';
import  '../assets/js/popper.min';
import  '../assets/js/bootstrap.min';

ในกรณีของฉันฉันต้องการนำเข้าไฟล์ JS เหล่านี้ในโครงการตอบสนองของฉัน

การแก้ปัญหาขึ้นอยู่กับสถานการณ์ เช่นเดียวกับในกรณีของฉันฉันต้องโหลดสิ่งที่ฝังลงไปในส่วนทำปฏิกิริยา

มองหา div และอ่านจากมันอย่างตั้งใจ data-urlแอตทริบิวต์และโหลด iframe ภายใน div ดังกล่าว

ทุกอย่างจะดีเมื่อคุณโหลดหน้าเว็บ: ก่อนอื่นให้แบ่งด้วย data-urlจะแสดงผล จากนั้นเพิ่มสคริปต์ calendly ให้กับเนื้อหา ดาวน์โหลดเบราว์เซอร์และประเมินมันและเราทุกคนกลับบ้านมีความสุข

ปัญหาเกิดขึ้นเมื่อคุณนำทางไปจากนั้นกลับมาที่หน้า เวลานี้สคริปต์ยังคงอยู่ในเนื้อความและเบราว์เซอร์จะไม่ดาวน์โหลดและประเมินใหม่อีกครั้ง

การแก้ไข:

1. เมื่อcomponentWillUnmountค้นหาและลบองค์ประกอบสคริปต์ จากนั้นติดอีกครั้งทำซ้ำขั้นตอนข้างต้น
2. $.getScriptเข้าสู่ มันเป็นตัวช่วย jquery ที่ดีที่ใช้ URI ของสคริปต์และการเรียกกลับสำเร็จ เมื่อสคริปต์โหลดแล้วสคริปต์จะประเมินและเริ่มการติดต่อกลับที่สำเร็จของคุณ componentDidMount $.getScript(url)ทั้งหมดที่ฉันต้องทำคือในของฉัน renderวิธีการของฉันมี div calendly อยู่แล้ว และทำงานได้อย่างราบรื่น