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

Posted 2023-05-08

【中文标题】将 HTML/CSS/JS 主题应用到 React 应用程序的正确方法

【英文标题】：Right approach to apply a HTML/CSS/JS theme to an React app

【发布时间】：2018-05-19 22:42:19

【问题描述】：

我一直在尝试将我在 themeforest.net 上购买的模板应用到我的 React Web 应用程序。将模板的 html/CSS 部分转换为 React 组件相对容易，但是我发现让 jQuery 部分工作起来很困难。

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

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

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

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

另一种解决方案是，假设在发生路由更改或组件内容更新时，再次粗暴地强制执行厨房水槽 custom.js。但我的直觉告诉我我不想去那里。

如果以前做过这件事的人能提供一些启示，我将不胜感激。目前，我使用semantic-ui-react 为我的应用设置样式。

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

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

【问题讨论】：

嗨，克里斯。你完成应用 Listeo 模板来做出反应了吗？我现在正在继续这样做，我想听听您的意见，您的挑战是什么？谢谢你..

@Emre 很抱歉没有收到这条评论，所以我听从了 Shiva Pandey 的建议，硬着头皮用 React 等价物交换了几个组件

【参考方案1】：

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

我建议您使用等效的 React 组件。以后维护项目会容易得多。