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

Right approach to apply a HTML/CSS/JS theme to an React app

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

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

这在静态演示 HTML 页面中运行良好,因为 custom.js 加载到 HTML 页面的末尾,此时所有节点都已呈现并准备好select或 select.

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

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

另一种解决方案是,假设每当有路线更改或组件内容更新时,野蛮地强制执行厨房水槽 custom.js 一次又一次。但是我的直觉告诉我我不想去那里。

如果以前做过这件事的人能说明一些问题,我将不胜感激。目前,我使用 semantic-ui-react 来设计我的应用程序。

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

PS:我读过 https://reactjs.org/docs/integrating-with-other-libraries.html 但没有找到适合我的快速解决方案。

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

我建议您使用等效的 React 组件。以后维护项目会方便很多。