Tôi có một vấn đề tương đối đơn giản là cố gắng thêm tập lệnh nội tuyến vào thành phần React. Những gì tôi có cho đến nay:

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

Tôi cũng đã thử:

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

Không có cách tiếp cận dường như để thực hiện các kịch bản mong muốn. Tôi đoán đó là một điều đơn giản tôi đang thiếu. Ai có thể giúp đỡ?

PS: Bỏ qua foobar, tôi có một id thực sự đang sử dụng mà tôi không cảm thấy muốn chia sẻ.

Chỉnh sửa: Mọi thứ thay đổi nhanh chóng và điều này đã lỗi thời - xem cập nhật

Bạn có muốn tìm nạp và thực thi tập lệnh nhiều lần, mỗi khi thành phần này được hiển thị hoặc chỉ một lần khi thành phần này được gắn vào DOM?

Có lẽ thử một cái gì đó như thế này:

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

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

    document.body.appendChild(script);
}

Tuy nhiên, điều này chỉ thực sự hữu ích nếu tập lệnh bạn muốn tải không có sẵn dưới dạng mô-đun / gói. Đầu tiên, tôi sẽ luôn luôn:

• Tìm gói hàng vào npm
• Tải xuống và cài đặt gói trong dự án của tôi ( npm install typekit)
• importgói mà tôi cần nó ( import Typekit from 'typekit';)

Đây có thể là cách bạn đã cài đặt các gói reactvà react-document-titletừ ví dụ của bạn và có một gói Typekit có sẵn trên npm .

Cập nhật:

Bây giờ chúng ta có các hook, một cách tiếp cận tốt hơn có thể là sử dụng useEffectnhư vậy:

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

Điều này làm cho nó trở thành một ứng cử viên tuyệt vời cho một hook tùy chỉnh (ví dụ 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;

Mà có thể được sử dụng như vậy:

import useScript from 'hooks/useScript';

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

  // rest of your component
}

Hơn nữa với các câu trả lời ở trên, bạn có thể làm điều này:

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

Các div bị ràng buộc thisvà kịch bản được đưa vào nó.

Bản demo có thể được tìm thấy trên scriptsandbox.io

Cách ưa thích của tôi là sử dụng React Mũ bảo hiểm - đó là một thành phần cho phép thao tác dễ dàng đầu tài liệu theo cách mà bạn có thể đã quen.

ví dụ

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-rcmet

Nếu bạn cần có <script>khối trong SSR (kết xuất phía máy chủ), một cách tiếp cận componentDidMountsẽ không hiệu quả.

Bạn có thể sử dụng react-safethư viện thay thế. Mã trong React sẽ là:

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>

Câu trả lời Alex Mcmillan cung cấp đã giúp tôi nhiều nhất nhưng không hoàn toàn hiệu quả đối với thẻ script phức tạp hơn.

Tôi hơi điều chỉnh câu trả lời của anh ấy để đưa ra giải pháp cho một thẻ dài với nhiều chức năng khác nhau đã được đặt "src".

(Đối với trường hợp sử dụng của tôi, tập lệnh cần để sống trong đầu cũng được phản ánh ở đây):

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

Tôi đã tạo một thành phần React cho trường hợp cụ thể này: https://github.com/coreyleelarson/react-typekit

Chỉ cần chuyển ID ID Bộ công cụ của bạn làm chỗ dựa và bạn sẽ ổn.

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;

Có một cách giải quyết rất tốt đẹp 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));
}

Điều này hoạt động cho HTML tùy ý và cũng giữ lại thông tin ngữ cảnh như document.currentScript.

Bạn có thể sử dụng npm postscribeđể tải tập lệnh trong thành phần phản ứng

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

Bạn cũng có thể sử dụng mũ bảo hiểm phản ứng

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

Mũ bảo hiểm lấy các thẻ HTML đơn giản và xuất ra các thẻ HTML đơn giản. Thật đơn giản, và React thân thiện với người mới bắt đầu.

cho nhiều tập lệnh, sử dụng cái này

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

Bạn có thể tìm thấy câu trả lời tốt nhất tại liên kết sau:

https://cleverbeagle.com/blog/articles/tutorial-how-to-load-third-party-scripts-dynamical-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();
};

Theo giải pháp của Alex McMillan , tôi có sự thích nghi sau đây.
Môi trường của riêng tôi: Phản ứng 16.8+, v9 + tiếp theo

// thêm một thành phần tùy chỉnh có tên Script
// hook / 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.
}

// Sử dụng compoennt tùy chỉnh, chỉ cần nhập nó và thay thế <script>thẻ chữ thường cũ bằng <Script>thẻ trường hợp lạc đà tùy chỉnh sẽ đủ.
// 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>

Đến bữa tiệc muộn một chút nhưng tôi quyết định tự tạo một cái sau khi xem câu trả lời của @Alex Macmillan và đó là bằng cách chuyển hai tham số phụ; vị trí để đặt các tập lệnh như hoặc và thiết lập async thành true / false, đây là:

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;

Cách gọi nó hoàn toàn giống như trong câu trả lời được chấp nhận của bài đăng này nhưng có thêm hai tham số (một lần nữa):

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

Để nhập tệp JS trong dự án phản ứng, hãy sử dụng commange này

1. Di chuyển tệp JS vào dự án.
2. nhập js vào trang bằng lệnh sau

Thật đơn giản và dễ dàng.

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

Trong trường hợp của tôi, tôi muốn nhập các tệp JS này trong dự án phản ứng của mình.

Giải pháp phụ thuộc vào kịch bản. Giống như trong trường hợp của tôi, tôi đã phải tải một cách lịch sự vào bên trong một thành phần phản ứng.

Thường xuyên tìm kiếm một div và đọc từ data-urlthuộc tính của nó và tải iframe bên trong div đã nói.

Tất cả đều tốt khi bạn tải trang đầu tiên: đầu tiên, div với data-urlđược hiển thị. Sau đó, kịch bản lịch được thêm vào cơ thể. Trình duyệt tải xuống và đánh giá nó và tất cả chúng tôi về nhà hạnh phúc.

Vấn đề xảy ra khi bạn điều hướng đi và sau đó quay trở lại trang. Lần này tập lệnh vẫn còn trong thân và trình duyệt không tải xuống lại và đánh giá lại nó.

Sửa chữa:

1. Trên componentWillUnmounttìm và loại bỏ các yếu tố kịch bản. Sau đó trên re mount, lặp lại các bước trên.
2. Nhập $.getScript. Nó là một trình trợ giúp jquery tiện lợi, lấy URI script và gọi lại thành công. Khi tập lệnh được tải, nó sẽ đánh giá nó và thực hiện cuộc gọi lại thành công của bạn. Tất cả tôi phải làm là trong tôi componentDidMount $.getScript(url). renderPhương pháp của tôi đã có div lịch. Và nó hoạt động trơn tru.