向React 17+中的枚举添加函数(带有功能组件)

// 定义颜色枚举
enum Color {
  Red = 'red',
  Green = 'green',
  Blue = 'blue',
}

// 向枚举添加函数
interface ColorWithFunctions extends Color {
  getContrastText(): string;
}

// 实现枚举函数的映射
const colorFunctions: { [K in Color]: ColorWithFunctions['getContrastText'] } = {
  [Color.Red]: () => 'white',
  [Color.Green]: () => 'black',
  [Color.Blue]: () => 'white',
};

// 功能组件示例
const ColorComponent: React.FC<{ color: Color }> = ({ color }) => {
  const contrastText = (color as ColorWithFunctions).getContrastText();
  return (
    <div style={{ color }}>
      This text is in {color} color.
      <br />
      Contrast text: {contrastText}
    </div>
  );
};

// 使用功能组件
const App: React.FC = () => (
  <div>
    <ColorComponent color={Color.Red} />
    <ColorComponent color={Color.Green} />
    <ColorComponent color={Color.Blue} />
  </div>
);

export default App;