时间戳

首页 > 解决方案 > ReactJs 正确应用 javascript

javascript - ReactJs 正确应用 javascript

问题描述

我有 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 函数的方法。这是可行的吗？

解决了

我要感谢所有回复并帮助我朝着正确方向前进的人。我通过像这样更新 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 来加载它……我还记得在返回时将其删除。我把它留在这里，希望它可以帮助将来遇到同样情况的人！谢谢stackoverflow社区！

标签： javascripthtmlreactjstwitter-bootstrap

解决方案

似乎你只是想在每次重新加载页面时运行一段代码，检查一下我发现它 React | 如何检测页面刷新 (F5)

看来您正在寻找什么。

推荐阅读