JS를 반응시키기 위해 추가한 외부 스크립트를 사용하려면 어떻게 해야 합니까?

JS를 반응시키기 위해 추가한 외부 스크립트를 사용하려면 어떻게 해야 합니까?

리액션 컴포넌트 a를 추가하고 싶다.

<script>http://xxx.xxx/XX.js</script>

JSX를 사용하여 간단하게 추가할 수 있다는 것은 알고 있습니다만, 어떻게 사용하는지는 잘 모르겠습니다.

예를 들어 이 스크립트에는 A라는 기능이 있습니다.Sort(), 컴포넌트에서 호출하여 사용하려면 어떻게 해야 합니까?

스크립트를 비동기적으로 로드하여 로드 시 액세스할 수 있습니다.

componentDidMount() {
  const script = document.createElement("script");
  script.src = "/static/libs/your_script.js";
  script.async = true;
  script.onload = () => this.scriptLoaded();

  document.body.appendChild(script);
}

접속할 필요가 있습니다.window.

 scriptLoaded() {
   window.A.sort();
 }

또는

scriptLoaded() {
  A.sort();
}

태그를 /public/index.html에 포함시킨 후 일반 JS 코드에서 사용할 때 스크립트를 사용할 수 있습니다. jQuery를 사용하는 경우의 예는 다음과 같습니다.

public/index.displaces에는 다음이 포함됩니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

그런 다음 jQuery 기능을 평소처럼 사용할 수 있는 모든 곳에서 다음을 수행합니다.

window.$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});

리액트 헬멧 npm 사용 가능

스텝 1 : npm i 리액트 리액트 리액트 리셋

순서 2:

<Helmet>
    <script src="/path/to/resource.js" type="text/javascript" />
</Helmet>

이러한 경우 외부 js 라이브러리를 사용하여 스크립트 태그를 컴포넌트에 삽입해야 하는 경우가 있지만, 응답에서는 jsx를 사용하기 때문에 HTML에서 추가하는 방법처럼 스크립트 태그를 직접 추가할 수 없습니다.

이 예에서는 헤드, 본문 요소 또는 컴포넌트에 외부 스크립트파일을 로드하는 방법에 대해 설명합니다.

componentDidMount() {
    const script = document.createElement("script");
    script.async = true;
    script.src = "https://some-scripturl.js";
    script.onload = () => this.scriptLoaded();



    //For head
    document.head.appendChild(script);

    // For body
    document.body.appendChild(script);

    // For component
    this.div.appendChild(script);

  }

필요한 스크립트를 추가하여 index.html 파일(사용하는 경우)을 변경할 수 있습니다.

또는 편집할 수 없거나 사용하지 않는 경우에는 이를 해결하는 여러 애드온(react-load-script 등)이 있습니다.

이 스크립트를 index.html에 추가한 후

<script>http://xxx.xxx/XX.js</script>

App.js(또는 원하는 곳)에서 console.log(윈도우)를 사용하면 사용 가능한 함수를 확인할 수 있습니다.정확한 기능을 확인하면 다음과 같이 사용할 수 있습니다.

window.A.sort();

이게 가장 간단한 방법일 것 같아요.기능 왼쪽에 'window'라고 적어야 합니다.

스크립트를 여러 컴포넌트로 Import할 경우 원하는 컴포넌트에 스크립트를 삽입할 수 있는 독자적인 커스텀훅을 작성할 수 있습니다.

import { useEffect } from 'react'
const importScript = src => {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = src
    script.async = true
    document.body.appendChild(script)
    return () => {
      document.body.removeChild(script)
    }
  }, [src])
}
export default importScript

원하는 컴포넌트에서 사용:

import importScript from 'import-path'
const DesiredComponent = props => {
  importScript("/path/to/resource")
  // ... rest of the code
}

후크 버전

import * as React from "react";

function loadError(onError) {
  console.error(`Failed ${onError.target.src} didn't load correctly`);
}

function External() {
  React.useEffect(() => {
    const LoadExternalScript = () => {
      const externalScript = document.createElement("script");
      externalScript.onerror = loadError;
      externalScript.id = "external";
      externalScript.async = true;
      externalScript.type = "text/javascript";
      externalScript.setAttribute("crossorigin", "anonymous");
      document.body.appendChild(externalScript);
      externalScript.src = `https://externalurl.example.com/external.js?key=9393ABCDEFGH`;
    };
    LoadExternalScript();
  }, []);

  return <></>;
}

export default External;

언급URL : https://stackoverflow.com/questions/53396307/how-do-i-use-external-script-that-i-add-to-react-js