javascript - 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>
            );     
        }
    }

在我的组件的渲染中，我尝试根据某些条件渲染多个组件。

因此，基本上，TablePoisition 始终保留在那里，PDFViewer 和 ReferenceMenu 有条件地呈现。

但是，我在这两种情况下看到的只是 TablePosition 组件。

这不应该起作用吗？

Answer 1

正如所解释的，由于您想要组合两个组件，因此您应该更改渲染逻辑。一个组件将始终保留在那里，而另一个组件将有条件地渲染。因此，您需要在同一个返回中渲染最后一个组件和粘性组件。我会做这样的事情:

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>
        );
    }