javascript - Controlling Order of React Component Rendering - Stack Overflow

admin管理员组

文章数量:1344926

As you know React ponents render in parallel. There is no guarantee in order that they finish rendering.

I want to render the following ponents in this exact order:

1. InterviewContentMain (because it will render the header

   . I need this header to render first so that I can act on it in my other two ponents after rendered. I am going to run some JS on it, etc. later on from those other two ponent's ponentDidMount so that's why I want this to render first)

2. InterviewContainer (should only render after InterviewContentMain has rendered)
3. TableOfContents (should only render after InterviewContainer and InterviewContentMain have rendered)

Here is a little more context

I tried a bunch of stuff as you can see with the lifecycle methods, which is probably totally wrong or not even sure it's what people are even doing for this sort of scenario, but no luck so far.

const Main = Component({
    getInitialState() {
        console.log("getInitialState being called");
        return null;
    },
    renderMe() {
        console.log("changed InterviewContent's state");
        this.setState({renderInk: true});
    },
    ponentDidMount() {
        console.log("InterviewContentMain mounted");
    },
    render(){
        var pany = this.propspany;

        return (
            <div id="ft-interview-content">
                <p className="section-heading bold font-22" id="interview-heading">Interview</p>
                <InterviewContent renderMe={this.renderMe} pany={pany}/>
            </div>
        )
    }
})

export default InterviewContentMain;


const InterviewContent = Component({
    ponentDidMount() {
        console.log("InterviewContent mounted");
    },
    renderMe() {
        console.log("changed InterviewContent's state");
        this.setState({subParentRendered: true});
    },
    render(){
        var pany = this.propspany;

        return (
            <div id="interview-content" className="clear-both">
                <div className="column-group">
                    <div className="all-20">
                        <TableOfContents renderHeader={this.props.renderMe}  renderContent={this.renderMe} pany={pany}/>
                    </div>
                    <div className="all-80">
                        <InterviewContainer pany={pany}/>
                    </div>
                </div>
            </div>
        )
    }
})

const TableOfContents = Component({
    enableInk() {
        new Ink.UI.Sticky(el, {topElement: "#interview-heading", bottomElement: "#footer"});
    },
    ponentDidMount() {
        console.log("table of contents mounted");
        this.renderHeader;
        this.renderContent;
        enableInk(); // I only want to run this if the Header and the Content have rendered first
    },
    render(){
        return (
            <div>
                <p className="margin-8"><span className="blue medium"><Link to="/">HOME</Link></span></p>
        )
    }
})

UPDATE:

here's what I tried. While they all 3 render, I'm still getting times where TableOfContents renders before InterviewContentMain or InterviewContent which means TableOfContent after rendered overlaps <p className="section-heading bold font-22" id="interview-heading">Interview</p> instead of rendering underneath it due to the sticky JS I tried to apply in TableOfContents

const InterviewContentMain = Component({
    getInitialState() {
        console.log("getInitialState being called");
        return {rendered: false};
    },
    ponentDidMount() {
        console.log("InterviewContentMain mounted")
        this.setState({rendered: true});
    },
    render(){
        var pany = this.propspany;

        return (
            <div id="ft-interview-content">
                <div className="section-heading bold font-22" id="interview-heading">Interview</div>
                { this.state.rendered && <InterviewContent pany={pany}/> }
            </div>
        )
    }
})

export default InterviewContentMain;


const InterviewContent = Component({
    getInitialState() {
        console.log("getInitialState being called");
        return {rendered: false};
    },
    ponentDidMount() {
        console.log("InterviewContent mounted")
        this.setState({rendered: true});
    },
    render(){
        var pany = this.propspany;

        return (
            <div id="interview-content" className="clear-both">
                <div className="column-group">
                    <div className="all-20">
                        <TableOfContents pany={pany}/>
                    </div>
                    <div className="all-80">
                        <InterviewContainer pany={pany}/>
                    </div>
                </div>
            </div>
        )
    }
})

const TableOfContents = Component({
    ponentDidMount() {
        const el = ReactDOM.findDOMNode(this);
        new Ink.UI.Sticky(el,{topElement: "#interview-heading", bottomElement: "#footer"});
        console.log("TableOfContents mounted");
    },
    render(){
        return (
            <div>
                <p className="margin-8"><span className="blue medium"><Link to="/">HOME</Link></span></p>
            </div>
        )
    }
})

As you know React ponents render in parallel. There is no guarantee in order that they finish rendering.

I want to render the following ponents in this exact order:

1. InterviewContentMain (because it will render the header

   . I need this header to render first so that I can act on it in my other two ponents after rendered. I am going to run some JS on it, etc. later on from those other two ponent's ponentDidMount so that's why I want this to render first)

2. InterviewContainer (should only render after InterviewContentMain has rendered)
3. TableOfContents (should only render after InterviewContainer and InterviewContentMain have rendered)

Here is a little more context https://youtu.be/OrEq5X9O4bw

I tried a bunch of stuff as you can see with the lifecycle methods, which is probably totally wrong or not even sure it's what people are even doing for this sort of scenario, but no luck so far.

const Main = Component({
    getInitialState() {
        console.log("getInitialState being called");
        return null;
    },
    renderMe() {
        console.log("changed InterviewContent's state");
        this.setState({renderInk: true});
    },
    ponentDidMount() {
        console.log("InterviewContentMain mounted");
    },
    render(){
        var pany = this.props.pany;

        return (
            <div id="ft-interview-content">
                <p className="section-heading bold font-22" id="interview-heading">Interview</p>
                <InterviewContent renderMe={this.renderMe} pany={pany}/>
            </div>
        )
    }
})

export default InterviewContentMain;


const InterviewContent = Component({
    ponentDidMount() {
        console.log("InterviewContent mounted");
    },
    renderMe() {
        console.log("changed InterviewContent's state");
        this.setState({subParentRendered: true});
    },
    render(){
        var pany = this.props.pany;

        return (
            <div id="interview-content" className="clear-both">
                <div className="column-group">
                    <div className="all-20">
                        <TableOfContents renderHeader={this.props.renderMe}  renderContent={this.renderMe} pany={pany}/>
                    </div>
                    <div className="all-80">
                        <InterviewContainer pany={pany}/>
                    </div>
                </div>
            </div>
        )
    }
})

const TableOfContents = Component({
    enableInk() {
        new Ink.UI.Sticky(el, {topElement: "#interview-heading", bottomElement: "#footer"});
    },
    ponentDidMount() {
        console.log("table of contents mounted");
        this.renderHeader;
        this.renderContent;
        enableInk(); // I only want to run this if the Header and the Content have rendered first
    },
    render(){
        return (
            <div>
                <p className="margin-8"><span className="blue medium"><Link to="/">HOME</Link></span></p>
        )
    }
})

UPDATE:

here's what I tried. While they all 3 render, I'm still getting times where TableOfContents renders before InterviewContentMain or InterviewContent which means TableOfContent after rendered overlaps <p className="section-heading bold font-22" id="interview-heading">Interview</p> instead of rendering underneath it due to the sticky JS I tried to apply in TableOfContents

const InterviewContentMain = Component({
    getInitialState() {
        console.log("getInitialState being called");
        return {rendered: false};
    },
    ponentDidMount() {
        console.log("InterviewContentMain mounted")
        this.setState({rendered: true});
    },
    render(){
        var pany = this.props.pany;

        return (
            <div id="ft-interview-content">
                <div className="section-heading bold font-22" id="interview-heading">Interview</div>
                { this.state.rendered && <InterviewContent pany={pany}/> }
            </div>
        )
    }
})

export default InterviewContentMain;


const InterviewContent = Component({
    getInitialState() {
        console.log("getInitialState being called");
        return {rendered: false};
    },
    ponentDidMount() {
        console.log("InterviewContent mounted")
        this.setState({rendered: true});
    },
    render(){
        var pany = this.props.pany;

        return (
            <div id="interview-content" className="clear-both">
                <div className="column-group">
                    <div className="all-20">
                        <TableOfContents pany={pany}/>
                    </div>
                    <div className="all-80">
                        <InterviewContainer pany={pany}/>
                    </div>
                </div>
            </div>
        )
    }
})

const TableOfContents = Component({
    ponentDidMount() {
        const el = ReactDOM.findDOMNode(this);
        new Ink.UI.Sticky(el,{topElement: "#interview-heading", bottomElement: "#footer"});
        console.log("TableOfContents mounted");
    },
    render(){
        return (
            <div>
                <p className="margin-8"><span className="blue medium"><Link to="/">HOME</Link></span></p>
            </div>
        )
    }
})

• javascript
• reactjs

Share Improve this question Follow edited Aug 17, 2016 at 7:33 PositiveGuy asked Aug 17, 2016 at 3:53 PositiveGuyPositiveGuy 20.3k3030 gold badges9494 silver badges152152 bronze badges 3

• 1 Of course you can control the order of rendering. { someProp && <Component /> } – azium Commented Aug 17, 2016 at 4:39
• 1 It's like an if statement... only render Component if someProp is true – azium Commented Aug 17, 2016 at 4:41
• 1 what @azium means is that you can render a ponent conditionally, thus you can control when a ponent is rendered (after someProp casts to true) – martriay Commented Aug 17, 2016 at 4:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

If you want to conditionally render a ponent, wrap it in a conditional (whether a function or an inline boolean expression)

You say:

TableOfContents (should only render after InterviewContainer and InterviewContentMain have rendered)

.. so inside the render method of TableOfContents parent container, check whether some values are true, like you would in an if statement.

render(){
    var pany = this.props.pany;

    return (
        <div id="interview-content" className="clear-both">
            <div className="column-group">
                <div className="all-20">
                  {this.state.subParentRendered &&
                    <TableOfContents renderHeader={this.props.renderMe}  renderContent={this.renderMe} pany={pany}/>
                  }
                </div>
                <div className="all-80">
                    <InterviewContainer pany={pany}/>
                </div>
            </div>
        </div>
    )
}

You are calling setState in ponentDidMount. Call it in ponentWillMount. It is an anti-pattern to call setState in ponentDidMount immediately because ponentDidMount is the one that calls render, see this discussion.

I have used slightly different syntax but it should be clearly understandable.

class InterviewContentMain ...
    this.state = {
      firstRendered: false
    }

    ponentWillMount() {
      this.setState({ firstRendered: true });
    }

    render() {
      return (
      {this.state.firstRendered && 
       <InterviewContent />
      }
      );
    }

class InterviewContent ...
    this.state = {
      second: false
    }

    ponentWillMount() {
      this.setState({ secondRendered: true });
    }

    render() {
      return (
      {this.state.secondRendered && 
       <TableOfContents />
      }
      );
    }

class TableOfContents ...

    render() {
      return (
       <div>Hello World in order</div>
      );
    }

本文标签： javascriptControlling Order of React Component RenderingStack Overflow