求助：将Office Fabric React函数组件转换为类组件

没问题，我帮你把这个函数组件转换成类组件，同时完整保留原有的所有功能。下面是转换后的代码，以及关键转换点的说明：

转换后的完整代码 #

import * as React from 'react';
import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { hiddenContentStyle, mergeStyles } from 'office-ui-fabric-react/lib/Styling';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
import { ContextualMenu } from 'office-ui-fabric-react/lib/ContextualMenu';

const dialogStyles = { main: { maxWidth: 450 } };
const dragOptions = { moveMenuItemText: 'Move', closeMenuItemText: 'Close', menu: ContextualMenu, };
const screenReaderOnly = mergeStyles(hiddenContentStyle);
const dialogContentProps = { type: DialogType.normal, title: 'Missing Subject', closeButtonAriaLabel: 'Close', subText: 'Do you want to send this message without a subject?', };

export class DialogBasicExample extends React.Component {
  constructor(props) {
    super(props);
    // 初始化状态，替代原组件的useBoolean hooks
    this.state = {
      hideDialog: true,
      isDraggable: false
    };
    // 生成唯一ID，替代原组件的useId hook
    this.labelId = `dialogLabel-${Math.random().toString(36).slice(2, 10)}`;
    this.subTextId = `subTextLabel-${Math.random().toString(36).slice(2, 10)}`;
  }

  // 切换对话框显示/隐藏状态
  toggleHideDialog = () => {
    this.setState(prevState => ({
      hideDialog: !prevState.hideDialog
    }));
  };

  // 切换对话框是否可拖拽状态
  toggleIsDraggable = () => {
    this.setState(prevState => ({
      isDraggable: !prevState.isDraggable
    }));
  };

  // 计算modalProps，替代原组件的useMemo逻辑
  get modalProps() {
    return {
      titleAriaId: this.labelId,
      subtitleAriaId: this.subTextId,
      isBlocking: false,
      styles: dialogStyles,
      dragOptions: this.state.isDraggable ? dragOptions : undefined
    };
  }

  render() {
    const { hideDialog, isDraggable } = this.state;

    return (
      <>
        <Toggle label="Is draggable" onChange={this.toggleIsDraggable} checked={isDraggable} />
        <DefaultButton secondaryText="Opens the Sample Dialog" onClick={this.toggleHideDialog} text="Open Dialog" />
        <label id={this.labelId} className={screenReaderOnly}>My sample label</label>
        <label id={this.subTextId} className={screenReaderOnly}>My sample description</label>
        <Dialog
          hidden={hideDialog}
          onDismiss={this.toggleHideDialog}
          dialogContentProps={dialogContentProps}
          modalProps={this.modalProps}
        >
          <DialogFooter>
            <PrimaryButton onClick={this.toggleHideDialog} text="Send" />
            <DefaultButton onClick={this.toggleHideDialog} text="Don't send" />
          </DialogFooter>
        </Dialog>
      </>
    );
  }
}

关键转换说明 #

• 状态管理替换：原组件的useBoolean hooks被替换为类组件的state，通过setState方法切换状态，确保状态更新的正确性和可追溯性。
• 唯一ID生成：在构造函数中生成随机字符串替代useId hook，保证每个组件实例的ID唯一，符合无障碍访问的要求。
• 计算属性替换：useMemo包裹的modalProps被转换为类的getter方法，当isDraggable状态变化时，会自动重新计算props，和原组件的缓存逻辑完全一致。
• 事件处理优化：使用箭头函数定义事件处理方法，避免在render中绑定事件导致不必要的组件重渲染。

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