将 HTML/CSS/JS 主题应用于 React 应用程序的正确方法

Question

我一直在尝试将我在 themeforest.net 上购买的模板应用到我的 React Web 应用程序中。将模板的 HTML/CSS 部分转换为 React 组件相对容易，但是，我发现让 jQuery 部分工作具有挑战性。

该模板使用了多个 jQuery 插件，例如 mmenu、magnific-popup、selected。示例 index.html 在 body 标记的末尾附近包含一个 custom.js。通过浏览这个 custom.js（超过 1000 行代码），我发现它所做的基本上是使用 jQuery 选择器来选择某个 DOM 节点，然后将 jQuery 插件函数或额外的 CSS 类应用于所选节点。对我来说，这个 custom.js 是一个厨房水槽。

这在静态演示 HTML 页面中效果很好，因为 custom.js 是在 HTML 页面的末尾加载的，此时所有节点都显示出来并准备好供选择器选择。

然而，作为一个单页面应用程序，React 应用程序动态更新 DOM 元素而无需刷新页面。我发现，在几个地方，jQuery 插件在路由改变或 props 更新后失去了对 DOM 节点的控制。

我能想到的一种优雅但速度较慢的方法是用功能等效的 React 组件替换 jQuery 插件。

另一个解决方案是，假设，只要有路由更改或组件内容更新，就会再次执行厨房水槽 custom.js 的野蛮力量。但是我的直觉告诉我我不想去那里。

如果以前做过这件事的人能提供一些启示，我将不胜感激。目前，我使用Semantic-ui-react来设计我的应用程序。

我一直在尝试应用的主题是themeforest上的 Listeo。

PS：我阅读了https://reactjs.org/docs/integrating-with-other-libraries.html，但没有发现它对我来说是一个快速的解决方案。

Answer 1

将 HTML 主题转换为 React 时，这是一个棘手的部分。如果你使用jquery来操作DOM，那么你就忽略了react的核心原则。我经历过几次同样的情况。我已经尝试过你提到的 custom.js 方法。根据我的经验，这是不值得的，你会遇到很多麻烦并最终编写一半的库。不要让我开始制作，你会想从头开始重写一切。

我建议您使用等效的 React 组件。这样你以后维护项目就会容易很多。