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

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

在 state 中为 tab 存储一个 id，例如：

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

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

const tabs = {
  post: () => <GroupPost />,
  details: () => <GroupDetails />,
};

const element = tabs[this.state.tab]();
return <div>{element}</div>;