当前位置：首页 > React

react如何执行script

2026-01-23 18:58:46React

在React中执行JavaScript脚本可以通过多种方式实现，具体方法取决于脚本的来源、用途以及执行时机。以下是几种常见的方法：

使用`useEffect`钩子执行脚本

在React组件中，可以通过useEffect钩子动态加载并执行脚本。这种方式适用于需要在组件挂载或更新时运行的脚本。

react如何执行script

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = "https://example.com/your-script.js";
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []); // 空依赖数组表示仅在组件挂载时执行

  return <div>Your component content</div>;
}

直接内联脚本

如果脚本内容较短，可以直接在组件的useEffect中内联执行。

react如何执行script

useEffect(() => {
  // 内联脚本逻辑
  console.log("Script executed");
}, []);

使用`dangerouslySetInnerHTML`

对于需要直接注入HTML（包含脚本）的场景，可以使用dangerouslySetInnerHTML。但需谨慎使用，避免XSS攻击。

function MyComponent() {
  return (
    <div 
      dangerouslySetInnerHTML={{
        __html: `
          <script>
            console.log("Inline script executed");
          </script>
        `
      }} 
    />
  );
}

动态加载外部脚本

通过async/await动态加载外部脚本文件，适用于按需加载的场景。

useEffect(() => {
  const loadScript = async () => {
    const script = document.createElement('script');
    script.src = "your-script.js";
    script.async = true;
    document.body.appendChild(script);
  };
  loadScript();
}, []);