在現代頁面上使用帶有 SPFx webpart 的 office-ui-fabric 面板時出現問題

Question

我編寫了一個基於反應的 Web 部件，它使用 Office UI Fabric React Panel 組件在屏幕右側顯示一個面板。 webpart 在工作台中運行良好。

但是，當將其部署到現代頁面時，面板會在 webpart 容器內呈現。因此，顯示在頁面內而不是屏幕右側。

工作台結果

頁面結果

在我的 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>
);

}

關於導致這種行為的任何建議？

提前致謝。

Answer 1

在 package 解決方案中，domainisolated 設置為 true，這當然會在 iframe 中呈現 web 部件。 這就解釋了奇怪的行為。 現在就像一個魅力。

Answer 2

您在使用辦公織物 ui 面板嗎？

當我在我的環境中測試時工作正常。