javascript - React.js: Why is there no componentDidRender event? - Stack Overflow

admin管理员组

文章数量:1295937

I have just started using React, and a couple of times I have thought to myself: "Why is there no ponentDidRender event?".

Say that I have a ponent that renders a table to the DOM, and I want to use bootstrap-sortable on this table to allow the user to sort on whatever column he wants. In the case of bootstrap-sortable you need to run $.boostrapSortable() after the table is drawn, in order to initialize the plugin.

As I see it, there are two handlers on a React ponent that would be logical to consider to use for this purpose:

• ponentDidMount: This does not work because the DOM does not seem to be updated at this point of the execution.

• ponentDidUpdate: This could possibly work, but it does not fire on the initial render.

I am not saying that React is actually missing a ponentDidRender function, because I assume that there is a perfectly logical explanation as to why it is not there. I am just asking if someone could explain why such a function is not present, and what would be the "React way" to handle a case like the one above.

I have just started using React, and a couple of times I have thought to myself: "Why is there no ponentDidRender event?".

Say that I have a ponent that renders a table to the DOM, and I want to use bootstrap-sortable on this table to allow the user to sort on whatever column he wants. In the case of bootstrap-sortable you need to run $.boostrapSortable() after the table is drawn, in order to initialize the plugin.

As I see it, there are two handlers on a React ponent that would be logical to consider to use for this purpose:

• ponentDidMount: This does not work because the DOM does not seem to be updated at this point of the execution.

• ponentDidUpdate: This could possibly work, but it does not fire on the initial render.

I am not saying that React is actually missing a ponentDidRender function, because I assume that there is a perfectly logical explanation as to why it is not there. I am just asking if someone could explain why such a function is not present, and what would be the "React way" to handle a case like the one above.

• javascript
• events
• dom
• reactjs

Share Follow asked Dec 29, 2014 at 11:50 Knut MariusKnut Marius 1,62811 gold badge2121 silver badges4040 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

In ponentDidMount you can do: this.getDOMNode() to get a reference to the underlying DOM for that ponent. So if you do want to use your mounted ponent with jQuery you can do:

ponentDidMount: function() {
    $(this.getDOMNode());
}

http://facebook.github.io/react/docs/working-with-the-browser.html

Here's a fiddle which shows jQuery acting on the DOM node of a react ponent:

http://jsfiddle/sa5e88ys/1/

As you can see, it adds a border to the div as expected. If you're still having problems I guess it could be with the plugin you're using rather than jQuery or react?

Although there's no ponentDidRender, you can make a method with the desired behavior and call it in both ponentDidMount (which is only called after the first render) and ponentDidUpdate (which is called after every render but the first).

Also, this is the preferred way of getting a ref to a DOM node from within the ponent: https://facebook.github.io/react/docs/refs-and-the-dom.html

本文标签： javascriptReactjs Why is there no componentDidRender eventStack Overflow