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

Question

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

但是，当将其部署到现代页面时，面板会呈现在webpart container.Thus中，显示在页面内部，而不是屏幕的右侧。

Workbench Result

Page Result

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

}

对于导致这种行为的原因有什么建议吗？

提前谢谢。

Answer 1

在包解决方案中，domainisolated被设置为true，这当然会在iframe中呈现web部件。这就解释了奇怪的行为。现在工作起来像个护身符。

Answer 2

您使用的是office fabric ui panel吗

当我在我的环境中测试时，运行良好。

​

​