ReactJs 正确应用 javascript

Posted 2023-03-05

【中文标题】ReactJs 正确应用 javascript

【英文标题】：ReactJs applying javascript correctly

【发布时间】：2021-03-12 20:01:28

【问题描述】：

我有 3 页带有引导模板的 reactjs 应用程序。我正在使用 react-router 来处理页面转换。 所以我有一个 index.js 文件，其中包含以下内容：

function App() 
   return(
      <Router>
        <Switch>
          <Route path="/page1/">
            <Page1 />
          </Route>
          <Route path="/page2">
            <Page2 />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </Router>
    );

在我的 index.html 文件中，我定义了一些 js 函数来对页面应用一些效果，比如轮播等。奇怪的是，当我点击page1上的链接到达page2时，会应用js效果，但是当我刷新它时，不会应用js效果......

这是我的 page2 文件（为简单起见，我删除了所有不必要的东西）：

function Page2()
useEffect(() => 
   window.applyEffects();
)

return(
  some jsx here...
)

我在这里做错了吗？

编辑

我意识到我忘了添加一个重要的细节。我删除了组件中的 useEffect 和对 window.applyEffects() 的调用，并且页面呈现出我所期望的没有效果。如果那时我从开发人员控制台调用 window.applyEffects() 一切正常。我怀疑我应该找到一种方法来调用 js 函数 AFTER 页面已完全呈现。这可行吗？

已解决

我要感谢所有回复并帮助我朝着正确方向前进的人。我通过像这样更新 useEffect 钩子来解决它：

useEffect(() => 
  const script = document.createElement('script');

  script.src = `$window.location.origin/js/effects.js`;
  script.async = true;

  document.body.appendChild(script);

  return () => 
    document.body.removeChild(script);
  
);

我在 js 文件夹中创建了一个名为 effects.js 的文件，并在每次加载组件时通过将其附加到 dom 来加载它……我还记得在返回时将其删除。我把它留在这里，希望它可以帮助将来遇到同样情况的人！ 感谢 *** 社区！

【参考方案1】：

看来你只是想在每次重新加载页面时运行一段代码，检查一下我找到了 React | How to detect Page Refresh (F5)

这似乎是您正在寻找的东西。

【讨论】：

我对另一个答案发表了类似的评论，但我猜这个人删除了他的答案。 useEffect 钩子将在没有 array 依赖的情况下以无限外观触发，从而触发内部函数。但是，似乎并非如此，我怀疑他没有正确使用window 对象。

在我编辑答案时尝试在依赖数组中添加窗口，例如 useEffect(() => window.applyEffects(); ,[window]) 甚至 window.applyEffects

感谢您的评论，我尝试在依赖数组中添加窗口，但在浏览器控制台中出现此错误：React Hook useEffect 具有不必要的依赖：'window'。排除它或删除依赖数组。像“window”这样的外部范围值不是有效的依赖项，因为即使我在数组中添加 window.applyEffects，改变它们也不会重新渲染我得到的组件......

是的，没有理由向 React 依赖数组添加任何全局变量，包括 window 本身。

感谢您的帮助，我已修复并使用解决方案更新了最初的问题

【参考方案2】：

我看到您在代码中使用了window 对象。也许这就是你问题的根源。在官方文档中它说：

Window 对象 window 对象代表一个打开的窗口 浏览器。

如果文档包含框架（标签），浏览器会创建一个 HTML 文档的 window 对象，以及一个额外的 window 对象 每一帧。

...这表明它会在浏览器中打开窗口后触发，因此我不确定刷新页面后它是否会重新触发。拥有useEffect 钩子应该会在页面刷新时触发任何内容，因为它会再次挂载组件。

我建议调查一下您是如何使用window.applyEffects() 的。 Here's a link to the official window documentation.

【讨论】：

感谢您的帮助，我已修复并使用解决方案更新了最初的问题