React中点击content_bar选项切换display-page区域组件的实现咨询

你现有的代码逻辑已经可以实现点击Transactions切换对应组件的需求，若要适配全部4个选项、提升可维护性，可按如下方案优化：

优化思路 #

• 不直接在state中存储组件实例，改为存储当前激活的tab标识，降低state复杂度
• 封装统一的tab切换方法，不用为每个选项单独编写点击回调
• 根据当前激活的tab标识动态渲染对应组件

优化后完整代码 #

import React, { Component } from 'react';
import './Data.css';
import Transactions from './Transactions';
import Send from './Send';
// 后续新增组件直接在此引入即可
import Friends from './Friends';
import Professional from './Professional';

class Data extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // 初始默认激活send tab
            activeTab: 'send'
        }
    }

    // 统一切换tab的方法
    switchTab = (tabName) => {
        this.setState({ activeTab: tabName });
    }

    render() {
        // 根据activeTab渲染对应组件
        const renderContent = () => {
            switch(this.state.activeTab) {
                case 'send':
                    return <Send />
                case 'transactions':
                    return <Transactions />
                case 'friends':
                    return <Friends />
                case 'professional':
                    return <Professional />
                default:
                    return <Send />
            }
        }

        return(
            <div className="content">
                <div className="content_bar">
                    <h5 onClick={() => this.switchTab('send')}>Send</h5>
                    <h5 onClick={() => this.switchTab('transactions')}>Transactions</h5>
                    <h5 onClick={() => this.switchTab('friends')}>Friends</h5>
                    <h5 onClick={() => this.switchTab('professional')}>Professional</h5>
                </div>
                <div className="display-page">
                  {renderContent()}
                </div>
            </div>
        );
    }
}

export default Data;

扩展说明 #

如果后续需要支持刷新页面保留当前tab状态，可以将activeTab的值存在本地存储中；如果需要支持路由跳转定位到对应tab，也可以结合react-router的查询参数做同步，不需要改动现有核心切换逻辑。

内容的提问来源于stack exchange，提问作者thomas305