如何在 React TypeScript 设计系统中正确实现多语言标题组件

本文讲解如何修复 react + typescript 中因作用域、类型传递和逻辑结构错误导致的多语言组件失效问题，提供可直接复用的类型安全实现，并指出国际化（i18n）的最佳实践路径。

本文讲解如何修复 react + typescript 中因作用域、类型传递和逻辑结构错误导致的多语言组件失效问题，提供可直接复用的类型安全实现，并指出国际化（i18n）的最佳实践路径。

在构建设计系统时，组件的类型安全性与逻辑内聚性至关重要。原代码存在多个关键问题：getTilte 拼写错误；linguage 变量在 getTitle() 函数体外不可访问（未作为参数传入，也未定义在闭包作用域）；独立的 getTitleXx 工厂函数与 TitleProps 类型脱节，且错误地尝试通过扩展运算符（{...{ linguage: 'pt-BR' }}）向原生

标签透传自定义 prop（HTML 元素不接受 linguage 属性，TS 也会报错）；最后，getTilte 函数本身未接收参数，却试图访问未声明的 linguage。

以下是重构后的专业级实现——将所有逻辑封装在单一、类型明确的函数组件内，确保类型推导准确、渲染高效、语义清晰：

react-pro

你是一位 React 专家，擅长高级 Hook、性能优化、状态管理和现代 React 模式。适用场景：高级 Hook 模式...

下载

import React from 'react';
import './title.css';

export type TitleLanguage = 'pt-BR' | 'es-CL' | 'en-US';

export type TitleProps = {
  language: TitleLanguage; // 修正属性名：linguage → language（更符合英语习惯）
};

export const Title: React.FC<titleprops> = ({ language }) => {
  // 根据语言返回对应文案
  const getText = (): string => {
    switch (language) {
      case 'pt-BR':
        return 'Gerenciamos sua TI com excelência';
      case 'en-US':
        return 'We manage your IT with excellence';
      case 'es-CL':
        return 'Gestionamos tu TI con excelencia';
      default:
        return 'We manage your IT with excellence'; // fallback
    }
  };

  // 根据语言返回对应 CSS 类名
  const getClassName = (): string => {
    switch (language) {
      case 'pt-BR':
        return 'storybook-title-portugues';
      case 'en-US':
        return 'storybook-title--english';
      case 'es-CL':
        return 'storybook-title--espanol';
      default:
        return 'storybook-title--english';
    }
  };

  return <h1 classname="{getClassName()}">{getText()}</h1>;
};</titleprops>

✅ 关键改进说明：