带有 React 和 Vue 的语义 UI 和 jQuery

Posted 2023-02-22

【中文标题】带有 React 和 Vue 的语义 UI 和 jQuery

【英文标题】：Semantic UI & jQuery with React & Vue

【发布时间】：2017-07-28 23:09:11

【问题描述】：

我计划使用semantic UI 来构建前端，但也想使用React 或Vue 来构建组件。我想知道如何将基于 jQuery 的框架（如语义 UI）与基于虚拟 DOM 的框架（如 React 和 Vue）结合起来。我听到的三个建议是：

使用自定义集成，例如 semantic react 或 vue ui。这些集成试图通过将 jQuery 逻辑转换为基于组件状态的逻辑来避免直接的 DOM 操作。它们是不完整的，总是与原始的不同步，因此需要不断的支持。

使用 Vue 的 mounted 钩子，如 export default mounted() // jQuery here , ... 或 React 的 componentDidMount，如 class App extends React.Component componentDidMount() // jQuery here 附加基于 jQuery 的逻辑 在 DOM 元素的这些钩子中。这些选项似乎有效 在许多语义 UI 效果的情况下，例如 dimmer 或 transition 麻烦应该很少出现。但它违背了 虚拟 DOM 的概念，因为它直接作用于 DOM。

完全避免使用 jQuery，在语义 UI 的情况下使用它的 CSS only implementation。然后通过使组件依赖于状态和仅状态来构建您需要的任何特定效果。这似乎是 React 和 Vue 的最佳实践，但在简单的 transition 或 dimmer 效果的情况下，它似乎有点像重新发明***。此外，这只是 1. 的变体，唯一的优势是您可以控制与语义 UI 的最新版本和功能同步。

我想问一下：您认为上述每种方法的优点和缺点是什么？还有哪些我没有提到的方法？

【问题讨论】：

你能缩小你想要使用语义 UI 做什么，以及它应该如何与你的组件交互吗？您的问题过于宽泛，无法提供好的答案。

查看this question，尤其是this repo。它谈到了一种叫做portals的东西。

@RoyJ：我对语义 UI 的非数据相关特性非常感兴趣，这些特性需要 JS 逻辑，例如：dimmer、transition、messages、drop downs、accordion...

【参考方案1】：

显然，Vue 和 jQuery 框架结合的难点在于 Vue 期望负责 DOM，jQuery 框架也是如此。您必须防止它们互相踩踏。

正确的做法是使用 Vue 作为您的框架，并使用语义 UI 作为实现细节。我认为让它反过来工作是不切实际的。

以正确的方式执行此操作的问题在于，您无法获得尽可能多的免费：您必须为要使用的语义 UI 的每个功能创建一个custom directive。这就是在 Vue 中允许你操作 DOM 的地方。

另请参阅Wrapper Component Example，它充实了您的第二个想法。

【讨论】：

非常好的 Vue 方法，正是我倾向于的方法