在现代页面上使用带有 SPFx webpart 的 office-ui-fabric 面板时出现问题答案

【问题标题】：Problem using office-ui-fabric Panel with SPFx webpart on modern page在现代页面上使用带有 SPFx webpart 的 office-ui-fabric 面板时出现问题
【发布时间】：2020-10-19 18:28:46
【问题描述】：

我编写了一个基于反应的 Web 部件，它使用 Office UI Fabric React Panel 组件在屏幕右侧显示一个面板。 Webpart 在工作台中运行良好。

但是，当将其部署到现代页面时，面板会在 webpart 容器内呈现。因此，显示在页面内而不是屏幕右侧。

Workbench Result

Page Result

在我的 React 组件的渲染方法中，我这样做：

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

}

对导致这种行为的原因有何建议？

提前致谢。

【问题讨论】：

标签： reactjs sharepoint spfx office-ui-fabric-react

【解决方案1】：

你在用office fabric ui panel吗？

在我的环境中测试时工作正常。

【讨论】：

嗨，李，我正在使用面板 Office Fabric UI React 6。似乎没有加载 Office UI Fabric 样式，因为主要部分的字体也不同。您能否与我分享您的示例，以便我看看是否有任何差异？谢谢
发布了我的测试项目github.com/OS-Lee/OfficeFabric
谢谢李！同时我发现了问题：在包解决方案中，domainisolated 设置为 true，这当然会在 iframe 中呈现 Web 部件。这就解释了奇怪的行为。现在就像一个魅力。感谢您的帮助！

【解决方案2】：

在包解决方案中，domainisolated 设置为 true，这当然会在 iframe 中呈现 Web 部件。这就解释了奇怪的行为。现在就像一个魅力。

【讨论】：