Question

有人可以帮我这个..想要本地化一个tsx组件/ s反应打字稿 - 打字。

如果还有其他方法，请告诉我

我的解决方案包含2个asp.net webapi。第一个使用mvc概念，另一个使用作为字体结尾（使用react typescript），在这个项目中我想本地化组件（.tsx）。我想知道如何创建资源文件以及如何在组件上调用它。

这是一个Home.tsx文件

import * from React from "react"; 
export class Home extends React.Component<{}{}> 
{ render() 
{ return ( <div> <h2>Welcome everyone!!</h2> </div>); 
} }

如果不能，是否可以创建下拉列表并选择语言，整个文本可以更改

如果两者都请告诉我

提前致谢

Answer 1

我建议您为此使用一个库：

反应国际：https://github.com/yahoo/react-intl

您基本上可以根据语言（en.json，fr.json等）创建资源文件希望这可以帮助。您也可以自己创建它，但这需要大量工作。

如果您只需要一个简单的解决方案，可以尝试以下方法：

    import * as React from "react";
// you can get the browser language through navigator.language
enum Language {
  English,
  French
}
// You can store these in json files (e.g: en.json and fr.json)
const frenchLabels = {
  welcome: "Bienvenue"
};
const englishLabels = {
  welcome: "Welcome"
};

export interface HomeState {
  language: Language;
}
export class Home extends React.Component<{}, HomeState> {
  state = {
    language: Language.English
  };
  render() {
    return (
      <div>
        <div>
          <button
            onClick={() =>
              this.setState({ ...this.state, language: Language.French })
            }
          >
            French
          </button>
          <button
            onClick={() =>
              this.setState({ ...this.state, language: Language.French })
            }
          >
            English
          </button>
        </div>{" "}
        <h2>{this.getWelcomeMessage()}</h2>{" "}
      </div>
    );
  }

  getWelcomeMessage = (): string => {
    switch (this.state.language) {
      case Language.English:
        return englishLabels.welcome;
      case Language.French:
        return frenchLabels.welcome;
      default:
        return englishLabels.welcome;
    }
  };
}

本地化（反应打字稿）

1 个答案: