React/JSX 구성 요소에 스크립트 태그를 효율적으로 추가하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

React/JSX 구성 요소에 스크립트 태그를 효율적으로 추가하는 방법은 무엇입니까?

Mary-Kate Olsen

풀어 주다： 2024-12-09 04:48:10

원래의

1063명이 탐색했습니다.

How to Efficiently Add Script Tags to React/JSX Components?

React/JSX에 스크립트 태그 추가

React/JSX에는 인라인 스크립팅을 통합하는 몇 가지 접근 방식이 있습니다. 한 가지 가능한 해결책은 스크립트를 DOM에 마운트하는 구성 요소 내에 함수를 만드는 것입니다. 예를 들면 다음과 같습니다.

componentDidMount() {
  const script = document.createElement("script");
  script.src = "https://use.typekit.net/foobar.js";
  script.async = true;
  document.body.appendChild(script);
}

로그인 후 복사

그러나 스크립트가 DOM에 이미 존재하거나 여러 번 로드해야 하는 경우에는 이 방법이 적합하지 않습니다.

보다 효과적인 접근 방식은 패키지를 활용하는 것입니다. npm과 같은 관리자는 스크립트를 모듈로 설치합니다. 이렇게 하면 통합 프로세스가 단순화되고 가져오기를 위해 스크립트에 액세스할 수 있습니다.

import {useEffect} from 'react';

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);
  };
}, []);

로그인 후 복사

이 기술을 사용하면 구성 요소가 마운트될 때 스크립트가 한 번만 로드되고 구성 요소가 마운트 해제될 때 제거됩니다.

이 접근 방식을 더욱 향상시키기 위해 사용자 정의 후크를 생성하여 스크립트 로딩 프로세스를 처리할 수 있습니다.

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 the component code
};

로그인 후 복사

위 내용은 React/JSX 구성 요소에 스크립트 태그를 효율적으로 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!