I'm working on creating a design system in ReactJS using TypeScript, and I'm encountering an issue where I'm unable to correctly pass and return types for my components. Here's what I've done so far:

我正在使用TypeScrip在ReactJS中创建一个设计系统，我遇到了一个问题，我无法正确地传递和返回组件的类型。以下是我到目前为止所做的：

• Moved Components: I've reorganized my components within the design
  system.


• Type Prop Calls: I've updated the way I call and handle types
  in my components.

However, I'm still facing difficulties in making it work as expected. Specifically, I want my component to return one of the defined components, but I seem to be unable to pass the types correctly.

然而，我仍然面临着让它按预期工作的困难。具体地说，我希望我的组件返回一个已定义的组件，但我似乎无法正确传递类型。

Here's a completed version of my code:

以下是我的代码的完整版本：

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

export type TitleProps = {
  linguage: 'pt-BR' | 'es-CL' | 'en-US'
}


export const Title = ({ linguage }: TitleProps) => {
  return (
    <h1 className="storybook-title-portugues" >
      Gerenciamos sua TI com excelência
    </h1>
  );
}

const getTitlePt = () => {
  return (
    <h1 className="storybook-title-portugues" {...{ linguage: 'pt-BR' }}>
      Gerenciamos sua TI com excelência
    </h1>
  );
}
const getTitleEn = () => {
  return (
    <h1 className="storybook-title--english"{...{ linguage: 'pt-BR' }}>
      We manage your IT with excellence
    </h1>
  );
}
const getTitleEs = () => {
  return (
    <h1 className="storybook-title--espanol"{...{ linguage: '' }}>
      Gestionamos tu TI con excelencia
    </h1>
  );
}
const getTilte = () => {
  if (linguage === 'pt-BR') {
    return getTitlePt
  } else if (linguage === 'en-US') {
    return getTitleEn
  } else {
    return getTitleEs
  }
  return getTilte
}

I tried going through PROPS and THIS but it doesn't work

我试了试道具和这个，但不起作用

Let's fix the typo first of all: getTilte should be getTitle

让我们首先纠正打字错误：getTilte应该是getTitle

Another problem is that you're trying to access linguage (it may be a typo ?), but it's not available because you didn't pass it as a parameter or from a higher scope. As you will see that linguage is only reachable by Title functional component and getTitle is out of this functional component.

另一个问题是，您正在尝试访问语言(可能是打字错误？)，但它不可用，因为您没有将其作为参数传递或从更高的范围传递。正如您将看到的，Language只能通过标题功能组件访问，而getTitle则不在此功能组件中。

Your props spreading approach is a bit unusual. It would be cleaner to just directly set them on the component.

你的道具散布方法有点不寻常。直接将它们设置在组件上会更干净。

Let me refactor your code:

让我重构您的代码：

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

export type TitleProps = {
  linguage: 'pt-BR' | 'es-CL' | 'en-US';
};

export const Title: React.FC<TitleProps> = ({ linguage }) => {
  const getTitle = () => {
    if (linguage === 'pt-BR') {
      return 'Gerenciamos sua TI com excelência';
    } else if (linguage === 'en-US') {
      return 'We manage your IT with excellence';
    } else {
      return 'Gestionamos tu TI con excelencia';
    }
  };

  const className = () => {
    if (linguage === 'pt-BR') {
      return 'storybook-title-portugues';
    } else if (linguage === 'en-US') {
      return 'storybook-title--english';
    } else {
      return 'storybook-title--espanol';
    }
  };

  return <h1 className={className()}>{getTitle()}</h1>;
};

That will fix your problem but I strongly advice you to use a package like i18next or similar libraries to deal with internationalization (i18n) in your projects. Here you can find a i18n sample on codesandbox (not mine): https://codesandbox.io/s/react-i18next-v9cq3

这将解决您的问题，但我强烈建议您在项目中使用类似I18Next或类似库的包来处理国际化(I18N)。这里您可以在Codesandbox(不是我的)上找到一个i18N示例：https://codesandbox.io/s/react-i18next-v9cq3