如何使用使用Reactjs修改DOM的jQuery插件？

Question

I have a question following this post:

issue

How should I use a jQuery plugin that modify the DOM with react. Like jimfb kindly answered to me on GH, React shoud return a pre-rendered component. So my question is, how exaclty call a function like remodal() in my example, during the lifecycle of a component?

Answer 1

I suggest you to read my answer here: Why should addChangeListener be in componentDidMount instead of componentWillMount?

But basically, when you need to integrate some existing plugin or code with React, the painless way is to generally call that code on the componentDidMount method and do the event listening the old way. If you are with jQuery, that means you should use something like

$(this.getDOMNode()).find('.some-child').on('click', this.onChildClick)

By doing it this way, you will miss some of the most important features regarding event delegation in React (see https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#under-the-hood-autobinding-and-event-delegation ) but that should not be a problem unless you wanted to create hundreds of event listeners.