如何将含静态变量的React类组件转为函数组件并获取对应值？

1. 重构函数组件并保留静态常量 #

函数组件的静态常量可以直接挂载到函数本身上，实现和类组件static属性一致的效果。以下是重构后的ProgressWindow.js代码：

import React from 'react';

const ProgressWindow = (props) => {
  // 从props中获取传入的messageSet值
  const { messageSet } = props;

  // 这里可以根据messageSet做业务逻辑处理
  return (
    <div className="progress-window">
      {/* 根据不同的messageSet渲染对应内容 */}
      {messageSet === ProgressWindow.MESSAGE_FOR_REPORT && <p>报告生成中...</p>}
      {messageSet === ProgressWindow.MESSAGE_FOR_SETTING && <p>设置保存中...</p>}
    </div>
  );
};

// 给函数组件添加静态常量，和原类组件的static属性等价
ProgressWindow.MESSAGE_FOR_REPORT = 'report';
ProgressWindow.MESSAGE_FOR_SETTING = 'setting';

export default ProgressWindow;

2. 组件调用方式保持不变 #

原component.js中的调用代码无需修改，依然可以通过组件访问静态常量并传递messageSet：

<ProgressWindow messageSet={ProgressWindow.MESSAGE_FOR_REPORT} />

关键说明 #

• 函数组件内部通过解构props直接获取messageSet，作用等同于类组件的this.props.messageSet。
• 静态常量挂载到函数组件的方式，完全兼容原有的外部调用逻辑，不需要修改任何使用该组件的代码。

内容的提问来源于stack exchange，提问作者Kihyun An