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

Posted 2023-04-13

【中文标题】使用条件渲染的选项卡导航

【英文标题】：Tab navigation using conditional rendering

【发布时间】：2017-08-20 23:36:02

【问题描述】：

我正在使用 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 个标签，我该如何处理？

【参考方案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'>

【讨论】：

你能再解释一下吗？

检查更新的答案，如果您需要帮助，请告诉我:)

谢谢！你的解决方案很完美

【参考方案2】：

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

this.state = 
  tab: 'post',
;

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

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

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

【讨论】：

顺便说一句，开关也像 Mayank Shukla 的回答一样有效

所以如果我有 3 个标签，我已经为所有 3 个标签设置了单独的 ID？

@CraZyDroiD 是的。