React开发：实现根据所选Colecao动态显示隐藏蓝色方块

嘿，我来帮你搞定这个React动态显示蓝色方块的需求！先理清楚核心诉求：蓝色方块初始隐藏，用户切换不同Classe（也就是你的tabs）并选中对应Classe下的Colecao后，才显示对应组的方块。结合你给的代码片段，我给你调整并完善实现方案：

你原来的colecoes结构是数组套单个对象，遍历起来有点绕。我把它改成每个Colecao是包含name和items的独立对象，后续渲染和逻辑处理会更顺手：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeTab: 'Classe 1',
      selectedColecao: null, // 新增：记录选中的Colecao，控制方块显示
      tabs: [
        {
          tituloTab: 'Classe 1',
          colecoes: [
            { name: 'Colecao 1', items: ['A', 'B', 'C', 'D'] },
            { name: 'Colecao 2', items: ['A', 'B', 'C', 'D', 'E'] }
          ]
        },
        {
          tituloTab: 'Classe 2',
          colecoes: [
            { name: 'Colecao 3', items: ['X', 'Y', 'Z'] },
            { name: 'Colecao 4', items: ['P', 'Q'] }
          ]
        }
        // 可继续添加更多Classe
      ]
    };
  }
  // 后续方法写在这里
}

添加切换Tab的方法，切换时重置选中的Colecao，确保方块重新隐藏：

handleTabChange = (tabTitulo) => {
  this.setState({ activeTab: tabTitulo, selectedColecao: null });
};

添加选择Colecao的方法，更新状态来触发方块渲染：

handleColecaoSelect = (colecao) => {
  this.setState({ selectedColecao: colecao });
};

在render方法里依次渲染Classe切换按钮、Colecao选择器，以及动态显示的蓝色方块：

render() {
  const { activeTab, selectedColecao, tabs } = this.state;
  // 获取当前选中Classe对应的所有Colecao
  const currentClasse = tabs.find(tab => tab.tituloTab === activeTab);
  const currentColecoes = currentClasse?.colecoes || [];

  return (
    <div style={{ padding: '20px' }}>
      {/* Classe切换按钮组 */}
      <div style={{ marginBottom: '20px' }}>
        {tabs.map(tab => (
          <button
            key={tab.tituloTab}
            onClick={() => this.handleTabChange(tab.tituloTab)}
            style={{
              padding: '8px 16px',
              marginRight: '10px',
              backgroundColor: activeTab === tab.tituloTab ? '#007bff' : '#fff',
              color: activeTab === tab.tituloTab ? '#fff' : '#000',
              border: '1px solid #007bff',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            {tab.tituloTab}
          </button>
        ))}
      </div>

      {/* Colecao选择下拉框 */}
      <div style={{ marginBottom: '20px' }}>
        <label>选择Colecao：</label>
        <select
          onChange={(e) => {
            const selectedName = e.target.value;
            const colecao = currentColecoes.find(c => c.name === selectedName);
            this.handleColecaoSelect(colecao);
          }}
          value={selectedColecao?.name || ''}
          style={{ padding: '6px', marginLeft: '10px' }}
        >
          <option value="">-- 请选择 --</option>
          {currentColecoes.map(colecao => (
            <option key={colecao.name} value={colecao.name}>
              {colecao.name}
            </option>
          ))}
        </select>
      </div>

      {/* 蓝色方块区域（初始隐藏，选中Colecao后自动显示） */}
      {selectedColecao && (
        <div style={{ display: 'flex', gap: '10px' }}>
          {selectedColecao.items.map(item => (
            <div
              key={item}
              style={{
                width: '50px',
                height: '50px',
                backgroundColor: '#007bff',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: '#fff',
                borderRadius: '4px'
              }}
            >
              {item}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

• 初始时selectedColecao为null，蓝色方块区域不会渲染，自然处于隐藏状态
• 切换Classe时会重置selectedColecao，保证切换到新分类后，方块重新隐藏，直到用户选择该分类下的Colecao
• 选中Colecao后，selectedColecao被赋值为对应对象，方块区域会自动渲染出对应组的蓝色方块

这样整个流程就完全匹配你的需求啦！

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