Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

dom ready event in React

I have some components like below:

Wrapper: wrap Loader and Page

Loader: some animation

Page: page content

code like this:

<body>
  <div id="app"></div>
</body>

class Loader extends Component {}

class Page extends Component {}

class Wrapper extends Component {
    render() {
        return (
            <Loader/>
            <Page />
        );
    }
}

ReactDOM.render(<Wrapper />, document.getElementById('app'));

I want hide Loader and show Page component after DOM has compeletely loaded.

How should I write dom ready event in React?

like jQuery: $(window).on('ready')

like image 245
lam Avatar asked Jul 29 '16 04:07

lam


People also ask

How do I know if my DOM is ready?

Use document. readyState === 'interactive' to detect when the DOM is ready.

What is DOM in Reactjs?

What is the DOM? The DOM (Document Object Model) represents the web page as a tree structure. Any piece of HTML that we write is added as a node, to this tree. With JavaScript, we can access any of these nodes (HTML elements) and update their styles, attributes, and so on.

How do you handle DOM in React?

In React, all DOM properties and attributes (including event handlers) should be camelCased. For example, the HTML attribute tabindex corresponds to the attribute tabIndex in React. The exception is aria-* and data-* attributes, which should be lowercased.

How do you call document ready in React?

ready() to call jquery function in react . You can make use of componentDidMount() just as your $(document). ready() to ensure that DOM is rendered. Then access jQuery dependent libraries as local variables to apply for DOM elemnets.


1 Answers

TL;DR If I understand correctly, the answer is probably "not possible". But there is another solution...

Here's what I think you're trying to do, described as a series of steps:

  1. page starts loading, <Loader /> component shows a "page loading" animation

  2. page finishes loading, <Loader /> component is removed (or hidden) and <Page /> component is inserted (or shown) with the "real" page content.

Here's the problem: remember that you inject your React components into the page like this:

ReactDOM.render(<Wrapper />, document.getElementById('app'));

You can't actually inject a React component until the DOM is loaded. So by that time, either <Loader /> appears for about 2 milliseconds and disappears, or it doesn't appear at all (since the DOM is already loaded by the time it gets injected into the page).

If you're trying to show a throbber or other simple animation (like an animated GIF), I'd try a hybrid approach:

Set up your HTML like this:

<body>
    <div id="app"><img src="throbber.gif" /></div>
</body>

In your script tag, include a JQuery "document ready" event handler to load the React component:

class Page extends Component {}

class Wrapper extends Component {
    render() {
        return (
            <Page />
        );
    }
}

$(document).ready(function () {
    ReactDOM.render(<Wrapper />, document.getElementById('app'));
});

Notice that I've left out the <Loader /> - the throbber image is doing the work of the loader.

The idea here is that while the page is loading, the throbber GIF will be throbbing away until the DOM is loaded, at which point JQuery's document ready event will fire & the contents of the div#app will be replaced.

I haven't tried this, but it should work, provided that React actually replaces the content of div#app, rather than just appending stuff to it. If that's not the case, then it's a simple matter of changing the document ready handler to something like this:

$(document).ready(function () {
    $('div#app img').remove();
    ReactDOM.render(<Wrapper />, document.getElementById('app'));
});
like image 155
Kryten Avatar answered Sep 20 '22 21:09

Kryten