javascript - 控制 React 组件渲染的顺序

Question

如你所知，React 组件是并行渲染的。无法保证它们会完成渲染。

我想按照这个确切的顺序呈现以下组件:

1. InterviewContentMain(因为它将呈现标题

   。我需要先呈现此标题，以便在呈现后我可以在我的其他两个组件中对其进行操作。我将运行一些它上面的 JS，等等。后来来自其他两个组件的 componentDidMount，所以这就是为什么我希望它首先呈现)

2. InterviewContainer(应仅在 InterviewContentMain 呈现后呈现)
3. TableOfContents(应仅在 InterviewContainer 和 InterviewContentMain 呈现后呈现)

这里有更多背景信息 https://youtu.be/OrEq5X9O4bw

正如您在生命周期方法中看到的那样，我尝试了很多东西，这可能是完全错误的，或者甚至不确定这是人们在这种情况下所做的事情，但到目前为止还没有成功。

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

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

export default InterviewContentMain;


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

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

const TableOfContents = Component({
    enableInk() {
        new Ink.UI.Sticky(el, {topElement: "#interview-heading", bottomElement: "#footer"});
    },
    componentDidMount() {
        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>
        )
    }
})

更新:

这是我试过的。虽然它们都 3 呈现，但我仍然得到 TableOfContents 在 InterviewContentMain 或 InterviewContent 之前呈现的时间，这意味着呈现重叠后的 TableOfContent <p className="section-heading bold font-22" id="interview-heading">Interview</p>由于我尝试在 TableOfContents 中应用的粘性 JS 而不是在它下面渲染

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

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

export default InterviewContentMain;


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

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

const TableOfContents = Component({
    componentDidMount() {
        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>
        )
    }
})

Answer 1

如果你想有条件地渲染一个组件，把它包裹在一个条件中(无论是一个函数还是一个内联 bool 表达式)

你说:

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

.. 所以在 TableOfContents 父容器的 render 方法中，检查某些值是否为真，就像在 if 语句中一样.

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

    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} company={company}/>
                  }
                </div>
                <div className="all-80">
                    <InterviewContainer company={company}/>
                </div>
            </div>
        </div>
    )
}