內建瀏覽器 <script> 元件 可讓您在文件中新增腳本。

<script> alert("hi!") </script>

參考

<script>

若要將內嵌或外部腳本新增至您的文件，請渲染內建瀏覽器 <script> 元件 。您可以從任何元件渲染 <script>，React 會在某些情況下將對應的 DOM 元素放置在文件標頭中，並刪除重複的腳本。

<script> alert("hi!") </script>
<script src="script.js" />

請參閱以下更多範例。

屬性

<script> 支援所有通用元素屬性。

它應該具有 children 或 src 屬性其中之一。

  • children：一個字串。內嵌腳本的原始碼。
  • src：一個字串。外部腳本的 URL。

其他支援的屬性

  • async：一個布林值。允許瀏覽器延遲腳本的執行，直到文件的其餘部分都已處理完畢 — 這是效能的建議行為。
  • crossOrigin：一個字串。要使用的 CORS 政策。其可能的值為 anonymous 和 use-credentials。
  • fetchPriority：一個字串。允許瀏覽器在同時擷取多個腳本時，按優先順序排列腳本。可以是 "high"、"low" 或 "auto"（預設值）。
  • integrity：一個字串。腳本的加密雜湊，用於驗證其真實性。
  • noModule：一個布林值。在支援 ES 模組的瀏覽器中停用腳本 — 允許不支援的瀏覽器使用後備腳本。
  • nonce：一個字串。使用嚴格內容安全策略時，允許資源的加密隨機數。
  • referrer：一個字串。說明在擷取腳本以及該腳本依序擷取的任何資源時，要發送哪種 Referer 標頭。
  • type：一個字串。說明腳本是傳統腳本、ES 模組還是導入映射。

停用 React 特殊腳本處理方式的屬性

  • onError：一個函式。當腳本載入失敗時呼叫。
  • onLoad：一個函式。當腳本載入完成時呼叫。

不建議與 React 一起使用的屬性

  • blocking：一個字串。如果設為 "render"，則指示瀏覽器在樣式表載入完成之前不要渲染頁面。React 使用 Suspense 提供更精細的控制。
  • defer：一個字串。阻止瀏覽器執行腳本，直到文件載入完成。與串流伺服器渲染的組件不相容。請改用 async 屬性。

特殊的渲染行為

React 可以將 <script> 組件移動到文件的 <head> 中，並移除重複的腳本。

要啟用此行為，請提供 src 和 async={true} 屬性。如果腳本具有相同的 src，React 將會移除重複的腳本。async 屬性必須為 true 才能安全地移動腳本。

這種特殊處理方式有兩個注意事項

  • 腳本渲染後，React 將忽略對屬性的更改。（如果發生這種情況，React 將在開發過程中發出警告。）
  • 即使渲染腳本的組件已被卸載，React 仍可能會將腳本留在 DOM 中。（這沒有影響，因為腳本插入 DOM 後只會執行一次。）

用法

渲染外部腳本

如果組件依賴某些腳本來正確顯示，您可以在組件內渲染 <script>。但是，組件可能會在腳本載入完成之前就被提交。您可以在觸發 load 事件後開始依賴腳本內容，例如使用 onLoad 屬性。

React 將會移除具有相同 src 的重複腳本，即使多個組件渲染它，也只會將其中一個插入 DOM 中。

import ShowRenderedHTML from './ShowRenderedHTML.js';

function Map({lat, long}) {
  return (
    <>
      <script async src="map-api.js" onLoad={() => console.log('script loaded')} />
      <div id="map" data-lat={lat} data-long={long} />
    </>
  );
}

export default function Page() {
  return (
    <ShowRenderedHTML>
      <Map />
    </ShowRenderedHTML>
  );
}

注意事項

當您想要使用腳本時，呼叫 preinit 函式可能會有好處。呼叫此函式允許瀏覽器比僅渲染 <script> 組件更早開始擷取腳本，例如透過發送 HTTP Early Hints 回應。

渲染內嵌腳本

要包含內嵌腳本，請使用腳本原始碼作為其子項來渲染 <script> 組件。內嵌腳本不會被移除重複或移動到文件 <head> 中。

import ShowRenderedHTML from './ShowRenderedHTML.js';

function Tracking() {
  return (
    <script>
      ga('send', 'pageview');
    </script>
  );
}

export default function Page() {
  return (
    <ShowRenderedHTML>
      <h1>My Website</h1>
      <Tracking />
      <p>Welcome</p>
    </ShowRenderedHTML>
  );
}
（左右箭頭圖示，指向 `` 和 `