内置浏览器<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 模块的浏览器中禁用脚本——允许为不支持 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>。但是，在脚本加载完成之前，组件可能会提交。例如，通过使用onLoad 属性，可以在触发load 事件后开始依赖脚本内容。

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 早期提示响应。

渲染内联脚本

要包含内联脚本，请使用脚本源代码作为子元素来渲染<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>