web-dev-qa-db-ja.com

react-i18next：テキストの途中にあるHTMLタグのリンクの補間

私はreact、 i18next および react-i18next を使用しています。次のように、reactで補間されるテキストの中央にHTMLリンクを含む翻訳可能なテキストが必要です。

This is my text with <a href="{{link}}">a beautiful link</a> in the middle of the text

以下の解決策は機能しますが、問題は、ラベルファイルにハードコーディングできないようにreactでリンクを補間する必要があることです。

"my-label": "This is my text with <a href=\"http://google.com\">a beautiful link</a> in the middle of the text"

[...]

<Interpolate i18nKey="my-label" useDangerouslySetInnerHTML />

これははるかに優れているようです：

"my-label": "This is my text with {{link}} in the middle of the text",
"link" "a beautiful link"

[...]

const { url } = props;
const link = <a href={url}>{t('link')}</a>

<Interpolate i18nKey="my-label" link={link} />

解決策かもしれませんが、アプリは多くの言語に翻訳されており、翻訳の品質が非常に重要であるため、翻訳者はテキスト全体を1行にすることを好みます（これは特にケースのある言語では重要です）。

このようなものを動作させる方法はありますか（または完全に異なる方法で解決する方法はありますか）？

"my-label": "This is my text with <a href=\"{{link}}\">a beautiful link</a> in the middle of the text"

[...]

const { url } = props;

<Interpolate i18nKey="my-label" useDangerouslySetInnerHTML link={url} />
javascriptreactjsi18nextreact-i18next
10
knuhol

React-i18next v4.4.0では、新しいコンポーネントTransを導入しました。

<Trans i18nKey="optionalKey">See the <Link to="/more">description</Link> below.</Trans>

Jsonは次のようになります：See the <1>description</1> below.

またはさらに複雑：

<Trans i18nKey="userMessagesUnread" count={count}>
Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
</Trans>

新機能はここに文書化されています： https://react.i18next.com/latest/trans-component

11
jamuhl

これはreact-intlとreact-i18nextの一般的な問題です-どちらのライブラリも、翻訳内のインラインコンポーネントとリッチテキストフォーマットのサポートが非常に限られています（すでに説明しました ここ 詳細）。

プロジェクトの最初の段階にいる場合は、別のi18nライブラリを検討することをお勧めします js-lingui （免責事項：私は作成者です）。これは、インラインコンポーネントを完全にサポートする最初の（そしてこれまでのところ唯一の）ライブラリです。

あなたは単に書く：

<Trans>See the <Link to="/more">description</Link> below.</Trans>

翻訳者はメッセージSee the <0>description</0> below.を処理します

唯一の価格は、追加のbabelプラグインを使用する必要があることです。これにより、それが可能になります。

0
Tomáš Ehrlich