Question

因此，我有一个组件“ Spreadsheet”，该组件正在从API中获取内容，但是一旦获取数据，我想隐藏侧面导航栏“ SideNav”。我似乎可以用条件渲染来做到这一点的唯一方法，但是第一个条件被包裹在一个手风琴中，因此它可能会在标签之间被捕获，以至于条件渲染无法正常工作。条件渲染正在重置我的组件，因此提取的数据会丢失。想知道如何有条件地渲染某些东西而不丢失其状态。附言该元素是来自React-router的元素，因此可能与它有关。这是代码：

render(){
 let Spreadsheet =
            <Route
                path="/spreadsheet"
                render={(props) =>
                    <Spreadsheet
                        selectedStation={this.state.selectedStation}
                        stationOptions={this.state.stationOptions}
                        start={this.state.start}
                        end={this.state.end}
                        data={this.data}
                        statusOptions={this.statusOptionsWithoutRaw}
                        dataSegments={this.state.dataSegments}
                        userSandboxes={this.state.userSandboxes}
                        refreshUserSandboxes={this.getUserSandboxes}
                        showSideNav={this.state.showSideNav}
                        toggleSideNav={(showSideNav) => this.setState({ showSideNav })}
                    />}
            />
return(
    <Container fluid={true}>
                    {this.state.showSideNav ?
                        <Row className="row--margin">
                            <Col md={2}>
                                <SideNav
                                    stations={this.state.station}
                                    setTab={this.setTab}
                                    handleStation={this.handleStation}
                                    stationOptions={this.state.stationOptions}
                                    userSandboxes={this.state.userSandboxes}
                                />
                            </Col>
                            <Col md={10}>
                                <div className="accordion" id="page">
                                    <Card>
                                        <Card.Header className="accordionTitle" as={Button} variant="link" data-toggle="collapse" data-target="#station">
                                            Station: {this.state.selectedStation && this.state.selectedStation.value}
                                        </Card.Header>
                                        <Card.Body id="station" className="collapse show card-body" data-parent="#page">
                                            {Spreadsheet}
                                        </Card.Body>
                                    </Card>
                                    <Card>
                                        <Card.Header className="accordionTitle" as={Button} variant="link" data-toggle="collapse" data-target="#analysis">
                                            Analysis Package:
                                        </Card.Header>
                                        <Card.Body id="analysis" className="collapse card-body" data-parent="#page">
                                            <AnalysisPackage />
                                        </Card.Body>
                                    </Card>
                                    <Card>
                                        <Card.Header className="accordionTitle" as={Button} variant="link" data-toggle="collapse" data-target="#moreInfo">
                                            Click for More Station Information:
                                        </Card.Header>
                                        <Card.Body id="moreInfo" className="collapse card-body" data-parent="#page">
                                            Hello! I'm another body
                                        </Card.Body>
                                    </Card>
                                </div>
                            </Col>
                        </Row>
                        :
                        <Row className="row--margin">
                            {Spreadsheet}
                        </Row>
                    }
                </Container>
)
}

Answer 1

从外观上看，您基本上是在重新安装并Spreadsheet。那是你真正想要的吗？

如果您只想隐藏侧边栏，为什么不专门在其上放置条件栏呢？喜欢

Row className="row--margin">
                            <Col md={2}>
                                {this.state.showSideNav && ( <-- LIKE THIS
                                 <SideNav
                                    stations={this.state.station}
                                    setTab={this.setTab}
                                    handleStation={this.handleStation}
                                    stationOptions={this.state.stationOptions}
                                    userSandboxes={this.state.userSandboxes}
                                 />
                                 )}
                            </Col>
                            <Col md={10}>
                                <div className="accordion" id="page">
                                    <Card>
                                        <Card.Header className="accordionTitle" as={Button} variant="link" data-toggle="collapse" data-target="#station">
                                            Station: {this.state.selectedStation && this.state.selectedStation.value}
                                        </Card.Header>
                                        <Card.Body id="station" className="collapse show card-body" data-parent="#page">
                                            {Spreadsheet}
                                        </Card.Body>
                                    </Card>
                                    <Card>
                                        <Card.Header className="accordionTitle" as={Button} variant="link" data-toggle="collapse" data-target="#analysis">
                                            Analysis Package:
                                        </Card.Header>
                                        <Card.Body id="analysis" className="collapse card-body" data-parent="#page">
                                            <AnalysisPackage />
                                        </Card.Body>
                                    </Card>
                                    <Card>
                                        <Card.Header className="accordionTitle" as={Button} variant="link" data-toggle="collapse" data-target="#moreInfo">
                                            Click for More Station Information:
                                        </Card.Header>
                                        <Card.Body id="moreInfo" className="collapse card-body" data-parent="#page">
                                            Hello! I'm another body
                                        </Card.Body>
                                    </Card>
                                </div>
                            </Col>
                        </Row>

如何在不重新发送元素的情况下更改元素的容器，从而重置状态

1 个答案: