使用lingui.js翻译ReactJs中的静态字符串消息

8e2ybdfx 于 2022-12-12 发布在 React

关注(0)|答案(1)|浏览(208)

我正在使用lingui.js和以下https://lingui.js.org/tutorials/react.html。我能够设置项目，它运行良好，还生成PO文件和翻译内容的内容/元素，围绕Trans宏<Trans>Send Verification Code</Trans>。但是，我无法找到帮助，我如何设置消息，我们显示在按钮点击或占位符，我们为输入元素设置，如：
如何设置字符串Please select security code preference的翻译？

handleOnSelect = (event: any) => {
  if (!this.state.selectedOption.value) {
    Toast.error("Please select security code preference");
  }
}

当我试着做下面这样的翻译时，它没有将字符串Please select security code preference提取到PO文件

handleOnSelect = (event: any) => {
  if (!this.state.selectedOption.value) {
    Toast.error(i18n._("Please select security code preference"));
  }
}

另外，如何从元素下面配置占位符？

<Select
            name="sendTo"
            id="sendTo"
            onChange={this.handleSendToChanged}
            placeholder={`Select`}
            options={this.state.selectOptions}
            value={this.state.selectedOption}
          />

您能帮助我了解/配置此部件吗？

reactjs

来源：https://stackoverflow.com/questions/74734810/translate-static-string-messages-in-reactjs-using-lingui-js

1条答案

按热度按时间

b09cbbtk1#

我想我能够弄清楚这一点，在这里添加解决方案，以便它可以帮助其他人。
我确实从@lingui/macro导入了t，如下所示

import { t } from "@lingui/macro";

然后我开始使用如下

<Select
            name="sendTo"
            id="sendTo"
            onChange={this.handleSendToChanged}
            placeholder={t({
              id: `msg.Select`,
              message: "Select",
            })}
            options={this.state.selectOptions}
            value={this.state.selectedOption}
          />

对于以下消息

Toast.error(
    t({
      id: `msg.Please select security code preference`,
      message: "Please select security code preference",
    })
  );

可能不是最好的方法，但直到我找到最好的方法来使用它，使我的生活更容易

赞(0）回复(0）举报 2022-12-12

我来回答

使用lingui.js翻译ReactJs中的静态字符串消息

1条答案

相关问题

热门标签

最新问答