使用条件渲染的选项卡导航

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 case来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>;