SPFx React WebPart中Office UI Fabric Panel现代页面渲染异常排查

问题描述 #

我开发了一个基于React的SPFx WebPart，通过Office UI Fabric React Panel组件实现在屏幕右侧显示面板。该WebPart在工作台（Workbench）中运行正常，但部署到SharePoint现代页面后，面板被渲染在WebPart容器内部，无法显示在屏幕右侧。

我的React组件render方法代码如下：

public render(): React.ReactElement<IMyTasksProps> {
  return (
    <div className={ styles.myTasks } >
      { this.state.loading && <div className={ styles.container }>
        <div className={ styles.row }>
          <div className={styles.columnLoadingContent}>
            <Spinner size={SpinnerSize.large} />
          </div>
        </div>
      </div> }
      { !this.state.loading && <div className={ styles.container }>
        <div className={ styles.row } onClick={this.onWebPartClick.bind(this)}>
          <div className={styles.columnMainIcon}>
            <Icon iconName="CheckList" className={iconClass} />
          </div>
          <div className={ this.state.myTaskItems.reduce((totalOpenTasks, taskItem) => totalOpenTasks + taskItem.props.openTasks, 0) == 0 ? styles.circleGreen : styles.circleRed }>{this.state.myTaskItems.reduce((totalOpenTasks, taskItem) => totalOpenTasks + taskItem.props.openTasks, 0)}</div>
          <div className={ styles.columnMainContent }>{escape(this.props.description)}</div>
          <div className={ styles.columnMainIcon }>
            <Icon iconName="ChromeBackMirrored" className={iconClass} />
          </div>
        </div>
        <div>
          <Panel type={PanelType.custom} customWidth="400px" isOpen={this.state.isOpen} onDismiss={this.onPanelClosed.bind(this)} >
            <h3>{escape(this.props.description)}</h3>
            <div className={ styles.myTasks } >
              <div className={ styles.taskContainer}>
                { this.state.myTaskItems
                  .sort((a,b) => (a.props.header > b.props.header) ? 1 : ((b.props.header > a.props.header) ? -1 : 0))
                  .map(taskItem => taskItem.render()) }
              </div>
            </div>
          </Panel>
        </div>
      </div> }
    </div>
  );
}

请问是什么原因导致了这种差异？恳请各位提供解决方案建议，谢谢！

解决方案 #

问题原因 #

这个差异的核心在于SharePoint现代页面的WebPart容器和Workbench的容器样式限制不同：

• Workbench里的WebPart容器没有严格的overflow限制，且定位规则宽松，Panel的绝对定位可以基于整个视口生效；
• 而SharePoint现代页面的WebPart容器默认设置了overflow: hidden，并且是position: relative定位，你的Panel现在直接嵌套在WebPart的DOM结构里，它的绝对定位会相对于WebPart容器，而不是整个屏幕，所以就被“困”在容器里了。

修复方法（优先推荐第一种） #

1. 使用Office UI Fabric的Portal组件挂载Panel到页面根节点

Fabric的Portal组件可以把指定的React元素挂载到DOM树的任意节点（比如document.body），这样就能脱离WebPart容器的限制。

步骤如下：

• 首先导入Portal组件：

  import { Portal } from 'office-ui-fabric-react/lib/Portal';
  

• 然后把你的Panel组件包裹在Portal里，指定挂载目标为document.body：

  // 替换原来的Panel代码
  <Portal target={document.body}>
    <Panel type={PanelType.custom} customWidth="400px" isOpen={this.state.isOpen} onDismiss={this.onPanelClosed.bind(this)} >
      <h3>{escape(this.props.description)}</h3>
      <div className={ styles.myTasks } >
        <div className={ styles.taskContainer}>
          { this.state.myTaskItems
            .sort((a,b) => (a.props.header > b.props.header) ? 1 : ((b.props.header > a.props.header) ? -1 : 0))
            .map(taskItem => taskItem.render()) }
        </div>
      </div>
    </Panel>
  </Portal>
  

这样Panel就会被渲染到页面的body标签下，完全脱离WebPart容器的样式限制，就能正常显示在屏幕右侧了。而且组件卸载时，Portal会自动清理对应的DOM节点，不用担心内存泄漏问题。

2. 覆盖WebPart容器的overflow样式（不推荐）

你可以尝试强制修改WebPart容器的overflow属性，让它允许内容溢出：

/* 在你的WebPart的CSS文件中添加 */
.ms-webpartzone-cell {
  overflow: visible !important;
}

但这个方法有风险：一是会影响页面上所有WebPart的布局，二是SharePoint官方样式可能会更新，导致这个覆盖失效，所以只作为临时方案使用。

3. 验证Panel的定位配置

确保你的Panel的type设置正确（你用的PanelType.custom是没问题的），另外检查是否有自定义CSS意外修改了Panel的定位属性。不过这个情况比较少见，还是Portal的方法最稳妥。

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