使用条件呈现的选项卡导航

Question

我正在使用 reactjs 条件渲染加载选项卡内容。我已经成功地完成了 2 个选项卡。但是现在我需要为 3 个选项卡加载组件。如何使用条件渲染来做到这一点？还是条件渲染是正确的方法？

2 个选项卡的代码

class InternalGroupsPage extends Component {
constructor() {
super();
this.state = {
showPostTab: true,
};
this.state = {
showDetailsTab: false,
};
this.post_tab = this.post_tab.bind(this);
this.detail_tab = this.detail_tab.bind(this);
}
componentDidMount() {
this.setState({
showPostTab: true,
});
}
post_tab() {
this.setState({
showPostTab: true,
showDetailsTab: false,
});
}
detail_tab() {
this.setState({
showPostTab: false,
showDetailsTab: true,
});
}
render() {
return (
<div className="body_clr">
<div className="group_page_header">
<div className="group_page_header_tabs">
<div className="tab_buttons_div">
<a className="grp_tab_btns" onClick={this.post_tab}>Posts</a>
<a className="grp_tab_btns" onClick={this.detail_tab}>Details</a>
</div>
</div>
</div>
<div className="">
{this.state.showPostTab ? <GroupPost/> : <GroupDetails/>}
</div>
</div>

这里很好，因为我只有 2 个选项卡。如果有 3 个选项卡，我该如何处理它？

Answer 1

在这种情况下，不要使用bool，使用string来标识选项卡并使用switch大小写来render相应的组件， 这样写：

<div className="">
{this.renderTab()}                        
</div>

在方法renderTab内部使用switch case并返回组件：

renderTab(){
switch(this.state.showPostTab){
case 'A': return <A/>;
case 'B': return <B/>;
case 'C': return <C/>;
}
}

通过这种方式，您可以处理n个选项卡。

检查工作示例：

var Post = () => <div> Post </div>;
var Detail = () => <div> Detail </div>;
var XYZ = () => <div> XYZ </div>;
class App extends React.Component{
constructor(){
super();
this.state = {tabName: 'post'}
}

tabChange(tabName){
this.setState({tabName});
}

renderTab(){
switch(this.state.tabName){
case 'post': return <Post/>
case 'detail': return <Detail/>
case 'xyz': return <XYZ/>
}
}

render(){
return(
<div>
<div className="tab_buttons_div">
<a className="grp_tab_btns" onClick={this.tabChange.bind(this,'post')}>  Posts | </a>
<a className="grp_tab_btns" onClick={this.tabChange.bind(this,'detail')}>  Details | </a>
<a className="grp_tab_btns" onClick={this.tabChange.bind(this,'xyz')}>  XYZ  </a>
</div>
{this.renderTab()}
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('app')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'>

Answer 2

将选项卡的 id 存储在状态中，例如：

this.state = {
tab: 'post',
};

然后在渲染中检查哪个选项卡处于活动状态并基于它进行渲染。您可以为此创建选项卡映射对象。

const tabs = {
post: () => <GroupPost />,
details: () => <GroupDetails />,
};
const element = tabs[this.state.tab]();
return <div>{element}</div>;