[英]React conditional rendering simplified
我將react16與Material-Ui組件一起使用。 在我的根組件上。 我想在屬性上有條件地加載選項卡和視圖。 我設法完成了這項功能。 但代碼看起來很丑陋,也許這可以簡化。 條件取決於this.props.isSIInstalled
render() {
const {shouldSwipe} = this.props;
return (
<MuiThemeProvider theme={theme}>
<Tabs className=' electric' value={this.state.value}
onChange={this.handleChange.bind(this)} variant="scrollable" id={'tabMenu'}>
<Tab label={1} value={0}/>
<Tab label={2} value={1}/>
<Tab label={3} value={2}/>
{this.props.isSIInstalled
&& <Tab label={4} value={3}/>}
</Tabs>
{
this.props.isSIInstalled ?
<SwipeableViews index={this.state.value} onChangeIndex={this.handleChange.bind(this)} disabled={!shouldSwipe}>
<div>Item One</div>
<div>Item Two</div>
<div>Item Three</div>
<div>Item Four</div>
</SwipeableViews> :
<SwipeableViews index={this.state.value} onChangeIndex={this.handleChange.bind(this)} disabled={!shouldSwipe}>
<div>Item One</div>
<div>Item Two</div>
<div>Item Three</div>
</SwipeableViews>
}
</MuiThemeProvider>
)
}
如我所見,您的條件組件幾乎相同,唯一的區別是您顯示/隱藏ItemFour取決於this.props.isSIInstalled。 因此,您可以將代碼簡化為:
...
</Tabs>
<SwipeableViews index={this.state.value} onChangeIndex={this.handleChange.bind(this)} disabled={!shouldSwipe}>
<div className="modal-container byod-no-pinch-zoom">
<div>Item One</div>
</div>
<div className="modal-container byod-no-pinch-zoom">
<div>Item Two</div>
</div>
<div className="modal-container byod-no-pinch-zoom">
<div>Item Three</div>
</div>
{
this.props.isSIInstalled && (
<div className="modal-container byod-no-pinch-zoom">
<div>Item Four</div>
</div>
)
}
</SwipeableViews>
此外,如果您想根據條件呈現完全不同的視圖,您可以執行以下操作:
</Tabs>
{
this.props.isSIInstalled && View1
}
{
!this.props.isSIInstalled && View2
}
總的來說,我所做的是使用map函數,它是React上的救生員,並將一些字符串移動到另一個文件,使代碼更加整潔和可讀。
return (
<MuiThemeProvider theme={theme}>
<div className="noScroll">
<Tabs className='byod-no-pinch-zoom electric' value={this.state.value}
onChange={this.handleChange.bind(this)} variant="scrollable" id={'tabMenu'}>
TAB_INFO.map(x => <Tab label={x.label} id={x.id} />)
{this.props.isSIInstalled
&& <Tab label={getSID('SID_RHMI_BYOD_SOURCE_EXPERIENCES')} value={3} />}
</Tabs>
{
this.props.isSIInstalled ?
<SwipeableViews index={this.state.value} onChangeIndex={this.handleChange.bind(this)} disabled={!shouldSwipe}>
<div className="modal-container byod-no-pinch-zoom">
<JourneyInfo webSocketClient={this.props.webSocketClient} />
</div>
['Item Two','Item Three','Item Four'].map( x=>
<div className="modal-container byod-no-pinch-zoom">
<div>{x}</div>
</div>
)
</SwipeableViews> :
<SwipeableViews index={this.state.value} onChangeIndex={this.handleChange.bind(this)} disabled={!shouldSwipe}>
<div className="modal-container byod-no-pinch-zoom">
<JourneyInfo webSocketClient={this.props.webSocketClient} />
</div>
<div className="modal-container byod-no-pinch-zoom" />
<div className="modal-container byod-no-pinch-zoom" />
</SwipeableViews>
}
</div>
</MuiThemeProvider>
)
}
另一個文件,通常稱為strings.js或常量。
const export TAB_INFO = [
{
label: 'SID_RHMI_BYOD_INFO',
value: 0,
},
{
label: 'SID_RHMI_BYOD_MEDIA',
value: 1,
},
{
label: 'SID_RHMI_BYOD_CLIMATE',
value: 2,
},
]
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.