React: ReactDOM.render return null

Created on 1 Mar 2018  路  1Comment  路  Source: facebook/react

question

In a component, componentDidMount function perform ReactDOM.render, return null, but ReactDOM.render render to the page normally.

If setTimeout is added to the componentDidMount function, execute in setTimeout ReactDOM.render but it returns normally object.

I don't know if this is a bug.

expectations

ReactDOM.render return an object correctly.

code

import React, { Component } from 'react';

export default class extends Component {

    constructor( props ) {
        super( props );
    }

    componentDidMount() {

        let div = document.createElement( 'div' );
        document.body.appendChild( div );
        let aaa = ReactDOM.render( <p>123123</p>, div );
        console.log( aaa );// return null

        setTimeout( () => {
            let div = document.createElement( 'div' );
            document.body.appendChild( div );
            let bbb = ReactDOM.render( <p>123123</p>, div );
            console.log( bbb );// return element string
        }, 100 );
    }

    render() {
        return (
            <div>
                <h1>123</h1>
            </div>
        );
    }
}

Most helpful comment

Nested ReactDOM.render calls inside a component are no longer guaranteed to be synchronous, see https://github.com/facebook/react/issues/12227.

Per https://reactjs.org/docs/react-dom.html#render, the return of render should not be relied upon and a top level ref should be used instead.

>All comments

Nested ReactDOM.render calls inside a component are no longer guaranteed to be synchronous, see https://github.com/facebook/react/issues/12227.

Per https://reactjs.org/docs/react-dom.html#render, the return of render should not be relied upon and a top level ref should be used instead.

Was this page helpful?
0 / 5 - 0 ratings