在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

您需要将条件渲染放置在变量或类似内容内。

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

我添加了一个包装器div ； 因为，我相信render的return不喜欢具有多个根元素。

如果变量为空； 然后，它不会影响整体渲染。

Answer 2

如前所述，由于要合并两个组件，因此应更改渲染逻辑。 一个组件将始终坐在那里，而另一个组件将有条件地渲染。 因此，您需要在同一返回中使用粘性组件来渲染最后一个组件。 我会做这样的事情：

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