Итак, у меня есть компонент «Электронная таблица», который извлекает что-то из API, но затем я хочу скрыть боковую панель навигации «SideNav», как только данные будут получены.Единственный способ, которым я могу сделать это с условным рендерингом, но первое условие заключено в аккордеон, так что оно может быть слишком захвачено между тегами для работы условного рендеринга.Условный рендеринг сбрасывает мой компонент, и, следовательно, полученные данные теряются.Хотите знать, как сделать что-то условно, не потеряв своего состояния?PS элемент от 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>
)
}