内置浏览器 <script> 组件 允许你将脚本添加到文档中。

¥The built-in browser <script> component lets you add a script to your document.

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

参考

¥Reference

<script>

要将内联或外部脚本添加到文档中，请渲染 内置浏览器 <script> 组件。你可以从任何组件渲染 <script>，React 会将相应的 DOM 元素放置在文档头中并消除重复的相同脚本。

¥To add inline or external scripts to your document, render the built-in browser <script> component. You can render <script> from any component and React will in certain cases place the corresponding DOM element in the document head and de-duplicate identical scripts.

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

请参阅下面的更多示例。

¥See more examples below.

属性

¥Props

<script> 支持所有 普通元素属性。

¥<script> supports all common element props.

它应该有 children 或 src 属性。

¥It should have either children or a src prop.

  • children：一个字符串。内联脚本的源代码。

    ¥children: a string. The source code of an inline script.

  • src：一个字符串。外部脚本的 URL。

    ¥src: a string. The URL of an external script.

其他支持的属性：

¥Other supported props:

  • async：一个布尔值。允许浏览器推迟执行脚本，直到处理完文档的其余部分 - 这是提高性能的首选行为。

    ¥async: a boolean. Allows the browser to defer execution of the script until the rest of the document has been processed — the preferred behavior for performance.

  • crossOrigin：一个字符串。要使用的 CORS 政策。它的可能值为 anonymous 和 use-credentials。

    ¥crossOrigin: a string. The CORS policy to use. Its possible values are anonymous and use-credentials.

  • fetchPriority：一个字符串。让浏览器在同时获取多个脚本时对脚本进行优先级排序。可以是 "high"、"low" 或 "auto"（默认值）。

    ¥fetchPriority: a string. Lets the browser rank scripts in priority when fetching multiple scripts at the same time. Can be "high", "low", or "auto" (the default).

  • integrity：一个字符串。脚本的加密哈希值，为 验证其真实性。

    ¥integrity: a string. A cryptographic hash of the script, to verify its authenticity.

  • noModule：一个布尔值。在支持 ES 模块的浏览器中禁用脚本 - 允许为不支持 ES 模块的浏览器提供回退脚本。

    ¥noModule: a boolean. Disables the script in browsers that support ES modules — allowing for a fallback script for browsers that do not.

  • nonce：一个字符串。使用严格的内容安全策略时的加密 允许资源的随机数。

    ¥nonce: a string. A cryptographic nonce to allow the resource when using a strict Content Security Policy.

  • referrer：一个字符串。获取脚本时显示 要发送什么 Referer 标头 以及脚本依次获取的任何资源。

    ¥referrer: a string. Says what Referer header to send when fetching the script and any resources that the script fetches in turn.

  • type：一个字符串。说明脚本是否为 经典脚本、ES 模块或导入映射。

    ¥type: a string. Says whether the script is a classic script, ES module, or import map.

禁用 React 脚本的特殊处理 的属性：

¥Props that disable React’s special treatment of scripts:

  • onError：一个函数。当脚本加载失败时调用。

    ¥onError: a function. Called when the script fails to load.

  • onLoad：一个函数。当脚本加载完成时调用。

    ¥onLoad: a function. Called when the script finishes being loaded.

不建议与 React 一起使用的属性：

¥Props that are not recommended for use with React:

  • blocking：一个字符串。如果设置为 "render"，则指示浏览器在加载脚本表之前不要渲染页面。React 使用 Suspense 提供更细粒度的控制。

    ¥blocking: a string. If set to "render", instructs the browser not to render the page until the scriptsheet is loaded. React provides more fine-grained control using Suspense.

  • defer：一个字符串。阻止浏览器在文档加载完成之前执行脚本。与流服务器渲染的组件不兼容。请改用 async 属性。

    ¥defer: a string. Prevents the browser from executing the script until the document is done loading. Not compatible with streaming server-rendered components. Use the async prop instead.

特殊渲染行为

¥Special rendering behavior

React 可以将 <script> 组件移动到文档的 <head> 并删除重复的相同脚本。

¥React can move <script> components to the document’s <head> and de-duplicate identical scripts.

要选择此行为，请提供 src 和 async={true} 属性。如果脚本具有相同的 src，React 将会删除重复的脚本。async 属性必须为 true 才能安全移动脚本。

¥To opt into this behavior, provide the src and async={true} props. React will de-duplicate scripts if they have the same src. The async prop must be true to allow scripts to be safely moved.

这种特殊处理有两个注意事项：

¥This special treatment comes with two caveats:

  • React 将忽略脚本渲染后对属性的更改。（如果发生这种情况，React 将在开发中发出警告。）

    ¥React will ignore changes to props after the script has been rendered. (React will issue a warning in development if this happens.)

  • 即使渲染脚本的组件已被卸载，React 也可能会将脚本保留在 DOM 中。（这没有任何效果，因为脚本在插入 DOM 时只执行一次。）

    ¥React may leave the script in the DOM even after the component that rendered it has been unmounted. (This has no effect as scripts just execute once when they are inserted into the DOM.)

用法

¥Usage

渲染外部脚本

¥Rendering an external script

如果组件依赖于某些脚本才能正确显示，你可以在组件内渲染 <script>。但是，组件可能会在脚本加载完成之前提交。一旦触发 load 事件，你就可以开始依赖脚本内容，例如通过使用 onLoad prop。

¥If a component depends on certain scripts in order to be displayed correctly, you can render a <script> within the component. However, the component might be committed before the script has finished loading. You can start depending on the script content once the load event is fired e.g. by using the onLoad prop.

React 将删除具有相同 src 的重复脚本，即使多个组件渲染它，也仅将其中一个插入到 DOM 中。

¥React will de-duplicate scripts that have the same src, inserting only one of them into the DOM even if multiple components render it.

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

¥When you want to use a script, it can be beneficial to call the preinit function. Calling this function may allow the browser to start fetching the script earlier than if you just render a <script> component, for example by sending an HTTP Early Hints response.

渲染内联脚本

¥Rendering an inline script

要包含内联脚本，请渲染 <script> 组件，并将脚本源代码作为其子组件。内联脚本不会被去重或移动到文档 <head>。

¥To include an inline script, render the <script> component with the script source code as its children. Inline scripts are not de-duplicated or moved to the document <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>
React 中文网 - 粤ICP备13048890号