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

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

2 个答案: