Question

我正在编写ReactJS应用程序。为了便于造型和使用响应能力，我使用HTML5主题称为 CANVAS HTML5主题＆＃39;，它使用jQuery函数制作动画，旁边和模态。这是他们在index.html：

中整合的方式

<head> <link... [css stylesheets related to theme are here] /> </head>

<body class="stretched  side-panel-left sticky-responsive-menu">
   <div id="wrapper" class="clearfix">
      <noscript> You need to enable JavaScript to run this app </noscript>
      <div id="root" class="section nomargin nopadding"></div>
   </div>

   <script src=".././js/jquery.js"></script>
   <script src=".././js/plugins.js"></script>
   <script>
      jQuery(document).ready(function ($) {
         $('.read-more-target').hide();
      });
</body>

此处，reactjs应用程序注入id=root标记，并且与主题相关的所有jquery函数也在<body>中。（注意：我知道使用两个DOM操作库并不是一个好习惯，但是用这种方式来抢先一步。）

我面临的问题如下：我在标题中使用按钮打开网页中的侧面板。

$('.side-panel-trigger').click(function () {
   $('body').addClass('side-panel-open');
});

点击side-panel-trigger按钮，它会将side-panel-open类添加到<body>标记，然后从左侧打开侧面板。（在Chrome开发工具中，如果我将side-panel-open类添加到<body>，则会打开） 然而，当我点击提到的按钮时，它不会打开侧面板。（<body class=...>似乎从DOM检查更改，但立即恢复为打开而没有side-panel-open）。 但是，当我刷新页面并点击此按钮时，它每次都会打开侧面板。 这可能不仅与侧面板有关，因为在某些页面中动画似乎没有开始，但是当我刷新它时会立即开始动画。（似乎jquery函数不应用于响应，主要是在使用react-router进行路由时。刷新似乎可以起到一切作用，但我不想添加刷新，因为它会减慢完成的应用程序。）

有没有解决方案来解决这个问题。应该id=root应用应该在不同的地方吗？我可以以某种方式将jquery函数和所有js文件添加到react应用程序中吗？

Answer 1

尝试将您的活动附加在始终存在的元素上：

$('body').on('click','.side-panel-trigger', function () {
   $('body').addClass('side-panel-open');
});

使用jquery函数和反应应用程序时必须刷新网页才能运行？

1 个答案: