چگونه تگ اسکریپت به React/JSX اضافه کنیم؟

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

    

      import { useEffect } from 'react';

const MyComponent = () => {
  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);
    };
  }, []);

  return (
    <div>
      {/* محتوا */}
    </div>
  );
};

    

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

    

      import useScript from 'hooks/useScript';

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

  return (
    <div>
      {/* محتوا */}
    </div>
  );
};

    

      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>
    );
  }
};