API 参考
组件

<script> - This feature is available in the latest Canary

Canary 版本

React 对 <script> 的扩展目前仅在 React 的 Canary 和实验版本中可用。在 React 的稳定版本中，<script> 仅作为 内置浏览器 HTML 组件 使用。在此处详细了解 React 的发布版本。

内置浏览器 <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：字符串。在使用严格的内容安全策略时，使用加密的 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>
  );
}
上一页<meta>
下一页<style>