在React.js上进行条件渲染

Question

render() {
        const tableStyle = this.getTableStyle();
        const tableSettings = this.getTableSettings();

        return (
            <div style={tables}>

                <TablePosition
                    contextMenuOn={true}
                    step={this.props.step}
                    pdfData={this.props.pdfData}
                    tableSettings={tableSettings}
                    tableStyle={tableStyle}
                    fileName={this.state.fileName}
                    tableSize={this.getTableSize()}
                    tableOffset={this.state.tableOffset}
                    desiredWidth={700}
                    updateXOffset={x => this.updateXOffset(x)}
                    updateYOffset={y => this.updateYOffset(y)}
                    markTable={() => this.markTable()}
                    setOutputLabels={(row, col, val) => this.setOuputLabels(row, col, val)}
                />
            </div>
        );

        if (!this.props.isThirdStep) {
            return (
                <div>
                    <div style={sideBySide}>
                        <PDFViewer
                            isThirdStep={this.props.isThirdStep}
                            paginationCallback={this.handlePageChange}
                            pdfData={this.state.pdfData}
                            desiredWidth={600}
                            selectedPage={this.props.savedPageNo}
                        />
                    </div>
                </div>
            );     
        } else {
            return (
                <div>
                    <ReferenceMenu />
                </div>
            );     
        }
    }

In my component's render, I try to render several components based on certain conditions.

So, basically, the TablePoisition always stays there, and the PDFViewer and ReferenceMenu renders conditionally.

However, what I see on both conditions is only the TablePosition component.

Is this not supposed to work?

Answer 1

You need to place your conditional renders inside variables or something similar.

var conditionContent1 = null;
var conditionContent2 = null;

if(condition1){
    conditionContent1 = <div>conditional content 1</div>;
}

if(condition2){
    conditionContent2 = <div>conditional content 2</div>;
}

return (
    <div id="wrapper">
        <div>
            content
        </div>
        {conditionContent1}
        {conditionContent2}
    </div>
);

I added a wrapper div ; because, I believe render 's return doesn't like having multiple root elements.

If the variables are null; then, it won't affect the overall render.

Answer 2

As explained since you want to combine two components you should change your render logic. One component will be sit there always and the other one will be rendered conditionally. So, you need to render that last component with the sticky one in the same return. I would do something like this:

renderPDFViewer = () => (
    <div>
        <div style={sideBySide}>
            <PDFViewer
                isThirdStep={this.props.isThirdStep}
                paginationCallback={this.handlePageChange}
                pdfData={this.state.pdfData}
                desiredWidth={600}
                selectedPage={this.props.savedPageNo}
            />
        </div>
    </div>
);

render() {
        const tableStyle = this.getTableStyle();
        const tableSettings = this.getTableSettings();

        return (
            <div>
            <div style={tables}>

                <TablePosition
                    contextMenuOn={true}
                    step={this.props.step}
                    pdfData={this.props.pdfData}
                    tableSettings={tableSettings}
                    tableStyle={tableStyle}
                    fileName={this.state.fileName}
                    tableSize={this.getTableSize()}
                    tableOffset={this.state.tableOffset}
                    desiredWidth={700}
                    updateXOffset={x => this.updateXOffset(x)}
                    updateYOffset={y => this.updateYOffset(y)}
                    markTable={() => this.markTable()}
                    setOutputLabels={(row, col, val) => this.setOuputLabels(row, col, val)}
                />
                </div>

        {
            !this.props.isThirdStep
                ? this.renderPDFViewer()
                : ( <div><ReferenceMenu /></div> )
        }
            </div>
        );
    }