是否可以在React JS中集成jQuery函数切换类
我有一个jQuery函数，用于在custa.js.s.s.s.s.上关闭类，然后在HTML中的公共文件夹中集成了所有CSS，但是所有其他文件都可以正常工作，但是Custom.js不起作用，所以我安装了jQuery图书馆＆amp;导入jQuery＆amp; index.js中的custom.js，但仍然存在同样的问题。是实现此目标的任何其他方法，因为我在custom.js中具有更多功能。
import $ from 'jquery;
$(document).ready(function () {
$(".mobile-filter-btn").click(function () {
$(".plp-filter").addClass("visible");
});
$(".mob-heading-close-btn").click(function () {
$(".plp-filter").removeClass("visible");
});
} <script type="text/jsx" src="%PUBLIC_URL%/assets/js/jquery-3.2.1.slim.min.js"></script>
<script type="text/jsx" src="%PUBLIC_URL%/assets/js/popper.min.js"></script>
<script type="text/jsx" src="%PUBLIC_URL%/assets/js/bootstrap.min.js"></script>
<script type="text/jsx" src="%PUBLIC_URL%/assets/js/custom.js"></script> I have a jQuery function for toggling the class in custom.js.so I integrate all the CSS, and bootstrap custom.js in a public folder in HTML, but all the other files work fine but custom.js is not working so I install the jQuery library & import the jQuery & custom.js in index.js but still the same problem. Is any other way to achieve this because I have more functions in custom.js.
import $ from 'jquery;
$(document).ready(function () {
$(".mobile-filter-btn").click(function () {
$(".plp-filter").addClass("visible");
});
$(".mob-heading-close-btn").click(function () {
$(".plp-filter").removeClass("visible");
});
} <script type="text/jsx" src="%PUBLIC_URL%/assets/js/jquery-3.2.1.slim.min.js"></script>
<script type="text/jsx" src="%PUBLIC_URL%/assets/js/popper.min.js"></script>
<script type="text/jsx" src="%PUBLIC_URL%/assets/js/bootstrap.min.js"></script>
<script type="text/jsx" src="%PUBLIC_URL%/assets/js/custom.js"></script> 如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
实际上，我认为它可以按预期工作，但是问题是，当尚未渲染这些类别的组件时，您正在尝试将单击处理程序放置。
您可以将这些jQuery代码放入函数中，将其导入您的React组件，然后在“ ComponentDidMount”中使用它，或者根据您使用的组件来使用空的依赖项（功能组件中的ComponentDidMount（例如ComponentDidmount））。
这样，您将确保渲染所有内容，并且可以将其放置在何处。
要检查此问题，请尝试在代码中使用console.log $（“。移动滤波器-btn”）。我希望它是不确定的。
这也不是好主意。它可能效果不太好，并且会产生很多错误或维护问题
Actually I assume that it works as expected, but the problem is, you are trying to put click handlers when components with those classes are not rendered yet.
You can put those jquery code into a function, import it to your react component and then use it in "componentDidMount" or useEffect with empty array of dependencies (works like componentDidMount in functional components) depending on which components you are using.
This way you will make sure that everything is rendered and you have where to put you click handlers.
To check this, try to console.log $(".mobile-filter-btn") in your code. I expect it to be undefined.
Also this is not good idea to bring jquery to react. It might work not very good with it and produce a lot of bugs or maintenance problems