如何根据选中的选项卡为Microsoft PowerBI设置不同高度？

你提到的通过条件判断动态赋值cssClassName的写法完全可行，这是实现不同选项卡对应不同高度的直接方案。以下是具体实现步骤和代码示例：

1. 核心思路 #

• 用状态跟踪当前选中的选项卡
• 为不同选项卡定义对应的CSS高度类
• 动态绑定cssClassName到PowerBIEmbed组件
• 配置PowerBI报表的自适应设置，确保内容匹配容器高度

2. 修改后的代码示例 #

Report.js #

import { useState } from 'react';
import { PowerBIEmbed } from 'powerbi-client-react';
import models from 'powerbi-client';
import './Report.css';

const Report = () => {
  // 跟踪当前激活的选项卡
  const [activeTab, setActiveTab] = useState('tab1');
  const [report, setReport] = useState(null);

  // 选项卡切换逻辑
  const switchTab = (tabName) => {
    setActiveTab(tabName);
    // 可选：若报表未自动适配高度，手动触发尺寸重计算
    report?.resize();
  };

  // 选项卡与样式类的映射（多选项卡时更易维护）
  const tabStyleMap = {
    tab1: 'small-height',
    tab2: 'medium-height',
    tab3: 'large-height'
  };

  // 报表嵌入配置（重点添加自适应设置）
  const embedReportConfig = {
    type: 'report',
    id: '你的报表ID',
    embedUrl: '你的报表嵌入URL',
    accessToken: '你的访问令牌',
    settings: {
      layoutType: models.LayoutType.Custom,
      customLayout: {
        displayOption: models.DisplayOption.FitToPageWidth
      }
    }
  };

  const eventHandlersMap = {
    // 你的事件处理逻辑（如加载完成、点击事件等）
  };

  return (
    <div>
      {/* 选项卡切换按钮 */}
      <div className="tab-group">
        <button 
          onClick={() => switchTab('tab1')}
          className={activeTab === 'tab1' ? 'active-tab' : ''}
        >
          选项卡1
        </button>
        <button 
          onClick={() => switchTab('tab2')}
          className={activeTab === 'tab2' ? 'active-tab' : ''}
        >
          选项卡2
        </button>
        <button 
          onClick={() => switchTab('tab3')}
          className={activeTab === 'tab3' ? 'active-tab' : ''}
        >
          选项卡3
        </button>
      </div>

      {/* 动态绑定样式的PowerBIEmbed组件 */}
      <PowerBIEmbed
        embedConfig={embedReportConfig}
        eventHandlers={eventHandlersMap}
        cssClassName={`report-base ${tabStyleMap[activeTab]}`}
        getEmbeddedComponent={(embedObject) => {
          setReport(embedObject);
        }}
      />
    </div>
  );
};

export default Report;

Report.css #

/* 公共容器样式，避免重复代码 */
.report-base {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* 不同选项卡对应的高度类 */
.small-height {
  height: 600px;
}

.medium-height {
  height: 900px;
}

.large-height {
  height: 1280px;
}

/* 选项卡按钮样式（可选） */
.tab-group button {
  margin-right: 12px;
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.tab-group .active-tab {
  background-color: #0078d4;
  color: #fff;
  border-color: #0078d4;
}

3. 关键注意事项 #

• 必须在embedConfig的settings中配置自适应布局，否则报表内容可能不会跟随容器高度变化，出现滚动条或内容截断
• 选项卡切换时，若报表高度未自动更新，调用report.resize()可强制PowerBI重新计算容器尺寸
• 当选项卡数量较多时，用对象映射样式类比多层三元表达式更易维护

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