我编写了一个基于反应的 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>
);
}
关于导致这种行为的任何建议？
提前致谢。
