如果在反应中重新访问页面，外部 JS 不起作用 - Javascript

在 React 应用中，当用户重新访问页面时，可能会发现之前嵌入的外部 JS 代码不再起作用。这是因为 React 根据组件及其状态重新渲染了页面，此时原先加载的 JS 可能已不再适用。本文将介绍以下两种解决方案：

解决方案一：使用 useEffect 钩子

useEffect 是 React 中的一个钩子函数，它允许我们在组件中执行副作用操作。我们可以使用 useEffect 来重新加载外部 JS 代码。具体做法如下：

import React, { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    const script = document.createElement("script");

    script.src = "path/to/external/js";

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div>...</div>;
}

在上面的代码中，我们创建了一个 MyComponent 组件，并在其中使用 useEffect 钩子完成了如下操作：

1. 创建了一个 script 标签，并将其 src 属性设置为外部 JS 的路径。
2. 将 script 标签添加到 body 中。
3. 在组件卸载时，将 script 标签从 body 中移除。

此时，再次访问页面时，外部 JS 代码应该可以正常运行了。

解决方案二：将 JS 代码直接嵌入 HTML

如果你希望更加简单粗暴一些，可以尝试直接将 JS 代码嵌入 HTML 代码中。具体来说，你可以在 HTML 文件中添加以下代码：

<script src="path/to/external/js"></script>

当然，这样做可能会破坏组件化的原则，不过在某些简单项目中也是可行的解决方案。

总结

当你在 React 应用中使用外部 JS 代码时，重新访问页面时可能会出现 JS 代码不再起作用的情况。为此，我们介绍了两种解决方案：使用 useEffect 钩子和将 JS 代码直接嵌入 HTML。在实际项目中，你可以根据自己的需求选择适合的解决方案。