Javascript React.js上的条件呈现 render（）{ const tableStyle=this.getTableStyle（）； const tableSettings=this.getTableSettings（）； 返回( this.updateOffset（x）} updateYOffset={y=>this.updateYOffset（y）} markTable={（）=>this.markTable（）} setOutputLabels={（行，列，val）=>this.setOutputLabels（行，列，val）} /> ); 如果（！this.props.isThirdStep）{ 返回( ); }否则{ 返回( ); } }

在我的组件渲染中，我尝试根据特定条件渲染多个组件

因此，基本上，

tableposition

始终保持在那里，

PDFViewer

和

ReferenceMenu

有条件地呈现

但是，我在这两种情况下看到的只是

TablePosition

组件

---

这不应该起作用吗？

您需要将条件呈现放在变量或类似的内容中

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

var conditionContent1=null；
var conditionContent2=null；
如果（条件1）{
条件内容1=条件内容1；
}
如果（条件2）{
条件内容2=条件内容2；
}
返回(
内容
{conditionContent1}
{conditionContent2}
);

我添加了一个包装器

div

；因为，我相信

render

的

return

不喜欢有多个根元素

---

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

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

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

var conditionContent1=null；
var conditionContent2=null；
如果（条件1）{
条件内容1=条件内容1；
}
如果（条件2）{
条件内容2=条件内容2；
}
返回(
内容
{conditionContent1}
{conditionContent2}
);

我添加了一个包装器

div

；因为，我相信

render

的

return

不喜欢有多个根元素

---

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

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

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

renderPDFViewer=（）=>(
);
render（）{
const tableStyle=this.getTableStyle（）；
const tableSettings=this.getTableSettings（）；
返回(
this.updateOffset（x）}
updateYOffset={y=>this.updateYOffset（y）}
markTable={（）=>this.markTable（）}
setOutputLabels={（行，列，val）=>this.setOutputLabels（行，列，val）}
/>
{
！this.props.isThirdStep
？此.renderPDFViewer（）
: (  )
}
);
}

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

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

renderPDFViewer=（）=>(
);
render（）{
const tableStyle=this.getTableStyle（）；
const tableSettings=this.getTableSettings（）；
返回(
this.updateOffset（x）}
updateYOffset={y=>this.updateYOffset（y）}
markTable={（）=>this.markTable（）}
setOutputLabels={（行，列，val）=>this.setOutputLabels（行，列，val）}
/>
{
！this.props.isThirdStep
？此.renderPDFViewer（）
: (  )
}
);
}

可能是因为您只返回

TablePosition

，所以第二个返回永远不会被计算，那么我们只需要为每个条件放置所有组件吗？您试图做的是等效于

fn（）{return 1；}

1将始终是returned@AravindS，否，返回语句应包含

jsx

元素，逻辑属于方法，因为它is@AravindS同样，逻辑属于return之外，这可能是因为您只返回

TablePosition

，第二个返回永远不会被计算，那么我们只需要为每个条件放置所有组件吗？您试图做的是等价于

fn（）{return 1；}

1将始终是returned@AravindS，否，返回语句应包含

jsx

元素，逻辑属于方法，因为它is@AravindS这可能是最好的方法，除了可能将显示提取到自己的组件中以处理各个步骤的所有共享逻辑之外components@Derek可能地它取决于条件内容。即使内容被抽象成不同的组件，这里的整体代码也可能不会改变。这可能是最好的方法，除了将显示提取到自己的组件中以处理各个步骤的所有共享逻辑之外components@Derek可能地它取决于条件内容。即使内容