React 구성 요소에 스크립트 태그를 안전하게 추가하는 방법은 무엇입니까?

React/JSX

에 스크립트 태그 추가

React에서는 위험하게SetInnerHTML을 사용하거나 다음에서 스크립트 요소를 생성하여 인라인 스크립팅을 추가할 수 있습니다. componentDidMount 수명주기

dangerouslySetInnerHTML

사용 원시 HTML을 문자열로 지정할 수 있지만 보안 취약점이 발생할 수 있으므로 주의해서 사용해야 한다는 점에 유의하는 것이 중요합니다. 예를 들면 다음과 같습니다.

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

그러나 이 접근 방식은 항상 원하는 스크립트를 실행하지 않을 수도 있습니다.

ComponentDidMount에서 스크립트 요소 만들기

다음을 고려하십시오.

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

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

    document.body.appendChild(script);
}

이 방법은 동적으로 구성 요소가 마운트될 때 DOM에 스크립트를 삽입합니다.

권장 접근 방식: npm 패키지 사용

인라인 스크립팅을 사용하기 전에 사전- 로드하려는 스크립트에 대해 빌드된 npm 패키지를 사용할 수 있습니다. 예를 들어 Typekit을 로드하려면 typekit 패키지를 설치하고 다음과 같이 가져올 수 있습니다.

import Typekit from 'typekit';

Update: Utilizing useEffect Hook

후크가 도입되면서 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);
  }
}, []);

또한 쉽게 재사용할 수 있도록 이 논리를 사용자 정의 후크로 래핑할 수도 있습니다.

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