Di Intlayer, penanaman dicapai melalui fungsi nest, yang memungkinkan Anda merujuk dan menggunakan kembali konten dari kamus lain. Alih-alih menggandakan konten, Anda dapat menunjuk ke modul konten yang sudah ada berdasarkan kuncinya.

Menyiapkan Penanaman

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:

**/*.tsx

Salin kode

Salin kode ke clipboard

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:

**/*.tsx

Salin kode

Salin kode ke clipboard

"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:

**/*.vue

Salin kode

Salin kode ke clipboard

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { fullNestedContent, partialNestedContent } = useIntlayer("key_of_my_second_dictionary");</script><template><div>  <p>Full Nested Content: {{ JSON.stringify(fullNestedContent) }}</p>  <p>Partial Nested Value: {{ partialNestedContent }}</p></div></template>

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { fullNestedContent, partialNestedContent } = useIntlayer("key_of_my_second_dictionary");</script><template><div>  <p>Full Nested Content: {{ JSON.stringify(fullNestedContent) }}</p>  <p>Partial Nested Value: {{ partialNestedContent }}</p></div></template>

To use nested content in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

**/*.svelte

Salin kode

Salin kode ke clipboard

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("key_of_my_second_dictionary");</script><div><p>Full Nested Content: {JSON.stringify($content.fullNestedContent)}</p><p>Partial Nested Value: {$content.partialNestedContent}</p></div>

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("key_of_my_second_dictionary");</script><div><p>Full Nested Content: {JSON.stringify($content.fullNestedContent)}</p><p>Partial Nested Value: {$content.partialNestedContent}</p></div>

To use nested content in Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Salin kode

Salin kode ke clipboard

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:

**/*.tsx

Salin kode

Salin kode ke clipboard

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:

app.component.ts

Salin kode

Salin kode ke clipboard

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-nest",template: `  <div>    <p>      Full Nested Content: {{ JSON.stringify(content().fullNestedContent) }}    </p>    <p>Partial Nested Value: {{ content().partialNestedContent }}</p>  </div>`,})export class NestComponent {content = useIntlayer("key_of_my_second_dictionary");JSON = JSON;}

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-nest",template: `  <div>    <p>      Full Nested Content: {{ JSON.stringify(content().fullNestedContent) }}    </p>    <p>Partial Nested Value: {{ content().partialNestedContent }}</p>  </div>`,})export class NestComponent {content = useIntlayer("key_of_my_second_dictionary");JSON = JSON;}

To use nested content with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

**/*.ts

Salin kode

Salin kode ke clipboard

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;

Menggunakan Nesting dengan React Intlayer

**/*.tsx

Salin kode

Salin kode ke clipboard

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:

**/*.tsx

Salin kode

Salin kode ke clipboard

"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:

**/*.vue

Salin kode

Salin kode ke clipboard

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { fullNestedContent, partialNestedContent } = useIntlayer("key_of_my_second_dictionary");</script><template><div>  <p>Full Nested Content: {{ JSON.stringify(fullNestedContent) }}</p>  <p>Partial Nested Value: {{ partialNestedContent }}</p></div></template>

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { fullNestedContent, partialNestedContent } = useIntlayer("key_of_my_second_dictionary");</script><template><div>  <p>Full Nested Content: {{ JSON.stringify(fullNestedContent) }}</p>  <p>Partial Nested Value: {{ partialNestedContent }}</p></div></template>

To use nested content in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

**/*.svelte

Salin kode

Salin kode ke clipboard

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("key_of_my_second_dictionary");</script><div><p>Full Nested Content: {JSON.stringify($content.fullNestedContent)}</p><p>Partial Nested Value: {$content.partialNestedContent}</p></div>

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("key_of_my_second_dictionary");</script><div><p>Full Nested Content: {JSON.stringify($content.fullNestedContent)}</p><p>Partial Nested Value: {$content.partialNestedContent}</p></div>

To use nested content in Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Salin kode

Salin kode ke clipboard

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:

**/*.tsx

Salin kode

Salin kode ke clipboard

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:

app.component.ts

Salin kode

Salin kode ke clipboard

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-nest",template: `  <div>    <p>      Full Nested Content: {{ JSON.stringify(content().fullNestedContent) }}    </p>    <p>Partial Nested Value: {{ content().partialNestedContent }}</p>  </div>`,})export class NestComponent {content = useIntlayer("key_of_my_second_dictionary");JSON = JSON;}

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-nest",template: `  <div>    <p>      Full Nested Content: {{ JSON.stringify(content().fullNestedContent) }}    </p>    <p>Partial Nested Value: {{ content().partialNestedContent }}</p>  </div>`,})export class NestComponent {content = useIntlayer("key_of_my_second_dictionary");JSON = JSON;}

To use nested content with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

**/*.ts

Salin kode

Salin kode ke clipboard

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;

Sumber Daya Tambahan

Untuk informasi lebih rinci tentang konfigurasi dan penggunaan, lihat sumber daya berikut:

Sumber daya ini memberikan wawasan lebih lanjut tentang pengaturan dan penggunaan Intlayer di berbagai lingkungan dan dengan berbagai framework.

Berkas

Markdown