react如何与修改html的javascript ui组件协同工作

How react works with javascript ui components that modifies html

本文关键字：javascript ui 组件 协同工作 html 修改 react      更新时间：2023-09-26

大多数javascript ui组件，如jquery ui、bootstrap或kendo ui，都采用一些html元素并动态呈现自己。

有点像这样：

$('#someselect').autocomplete();

我想知道这些框架是否可以与react一起有效地使用。

比方说，我想把这样的组件包装成react组件。当组件状态发生变化时，例如SelectedValue，react会重新发送html。但是由于html只是javascript ui组件呈现自己的容器（例如autocomplete），所以它不是很有效。

react可以有效地与大多数javascript ui组件一起使用，或者它们必须在构建时考虑到类似react的渲染

react文档中的这篇文章"使用浏览器"讨论了这一点。

直接使用jQuery之类的东西在DOM上操作被认为不是一种好的做法，原因有几个：

  • React有意不鼓励使用DOM属性作为选择器，其理由是通过组件层次结构向下跟踪道具更具可扩展性。

  • 这些插件没有利用React的事件生命周期。您将拥有依赖于DOM完全变异的功能，以及其他常规反应组件。

不过，如果需要，您可以在componentDidMount中使用类似jQuery的东西对DOM执行操作。

下面是一个将React与jQueryUI-Sortable一起使用的示例。

相关文章：