将事件从jQuery插件转发到React组件？

Question

Let's say I have a project that is mostly written in React and I want to add a dropdown from Semantic UI . Is it possible to interop them somehow? I mean that there should be a React component that on componentDidMount calls $('.ui.dropdown').dropdown() and then somehow forwards jQuery events to React, which keeps the state in sync. Is that possible to do? I understand that it probably will cause performance issues, but it still might be useful in case there's no React component that does the same thing as an existing jQuery plugin.

Answer 1

There is no silver bullet afaik, jQuery "plugins" tend to do a lot of DOM manipulations that won't play well with React's virtual DOM diffing.

Some plugins will also do DOM manipulation outside it's own element, f.ex modals that appends nodes into the document.body or elsewhere.

If you know a little bit about the plugin and what it does, you might be able to manually create such a component "bridge" that also listens for jQuery events and calls component lifecycle methods, but I think you will have to do that manually for each plugin.