このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るこのドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンクドキュメントのMarkdownをクリップボードにコピー
ネスト / サブコンテンツ参照
ネストの仕組み
Intlayerでは、nest関数を使用して、別の辞書からコンテンツを参照および再利用することでネストを実現します。コンテンツを重複させる代わりに、キーを使用して既存のコンテンツモジュールを指すことができます。
ネストの設定
Intlayerプロジェクトでネストを設定するには、まず再利用したい基本コンテンツを定義します。次に、別のコンテンツモジュールでnest関数を使用してそのコンテンツをインポートします。
ベースディクショナリ
別のディクショナリにネストするベースディクショナリの例を以下に示します：
コードをクリップボードにコピー
import { type Dictionary } from "intlayer";
const firstDictionary = {
key: "key_of_my_first_dictionary",
content: {
content: "content",
subContent: {
contentNumber: 0,
contentString: "string",
},
},
} satisfies Dictionary;
export default firstDictionary;
Nestを使用した参照
次に、nest関数を使用して上記のコンテンツを参照する別のコンテンツモジュールを作成します。コンテンツ全体または特定のネストされた値を参照できます:
コードをクリップボードにコピー
import { nest, type Dictionary } from "intlayer";
const myNestingContent = {
key: "key_of_my_second_dictionary",
content: {
// 辞書全体を参照します:
fullNestedContent: nest("key_of_my_first_dictionary"),
// 特定のネストされた値を参照します:
partialNestedContent: nest(
"key_of_my_first_dictionary",
"subContent.contentNumber"
),
},
} satisfies Dictionary;
export default myNestingContent;
2番目のパラメーターとして、そのコンテンツ内のネストされた値へのパスを指定できます。パスが指定されない場合、参照された辞書のコンテンツ全体が返されます。
ネストの設定
To use nested content in a React component, leverage the useIntlayer hook from the react-intlayer package. This hook retrieves the correct content based on the specified key. Here's an example of how to use it:
コードをクリップボードにコピー
import type { FC } from "react";
import { useIntlayer } from "react-intlayer";
const NestComponent: FC = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
"key_of_my_second_dictionary"
);
return (
<div>
<p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
<p>Partial Nested Value: {partialNestedContent}</p>
</div>
);
};
export default NestComponent;
To use nested content in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:
コードをクリップボードにコピー
"use client";
import type { FC } from "react";
import { useIntlayer } from "next-intlayer";
const NestComponent: FC = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
"key_of_my_second_dictionary"
);
return (
<div>
<p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
<p>Partial Nested Value: {partialNestedContent}</p>
</div>
);
};
export default NestComponent;
To use nested content in Vue components, retrieve it via the useIntlayer hook. Here's an example:
コードをクリップボードにコピー
To use nested content in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:
コードをクリップボードにコピー
To use nested content in Preact components, retrieve it via the useIntlayer hook. Here's an example:
コードをクリップボードにコピー
import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";
const NestComponent: FC = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
"key_of_my_second_dictionary"
);
return (
<div>
<p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
<p>Partial Nested Value: {partialNestedContent}</p>
</div>
);
};
export default NestComponent;
To use nested content in SolidJS components, retrieve it via the useIntlayer hook. Here's an example:
コードをクリップボードにコピー
import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";
const NestComponent: Component = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
"key_of_my_second_dictionary"
);
return (
<div>
<p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
<p>Partial Nested Value: {partialNestedContent}</p>
</div>
);
};
export default NestComponent;
To use nested content in Angular components, retrieve it via the useIntlayer hook. Here's an example:
コードをクリップボードにコピー
To use nested content with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:
コードをクリップボードにコピー
import { installIntlayer, useIntlayer } from "vanilla-intlayer";
installIntlayer();
const content = useIntlayer("key_of_my_second_dictionary").onChange(
(newContent) => {
document.getElementById("nested")!.textContent =
newContent.partialNestedContent;
}
);
// Initial render
document.getElementById("nested")!.textContent = content.partialNestedContent;
追加リソース
設定や使用方法の詳細については、以下のリソースを参照してください:
これらのリソースは、さまざまな環境やフレームワークでのIntlayerのセットアップと使用方法についてさらに詳しく説明しています。