Penanaman / Referensi Sub Konten

Cara Kerja Penanaman

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

Untuk menyiapkan penanaman dalam proyek Intlayer Anda, pertama-tama Anda mendefinisikan konten dasar yang ingin Anda gunakan kembali. Kemudian, dalam modul konten terpisah, Anda menggunakan fungsi nest untuk mengimpor konten tersebut.

Kamus Dasar

Berikut adalah contoh kamus dasar untuk ditanamkan dalam kamus lain:

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;

Referensi dengan Nest

Sekarang, buat modul konten lain yang menggunakan fungsi nest untuk mereferensikan konten di atas. Anda dapat mereferensikan seluruh konten atau nilai nested tertentu:

import { nest, type Dictionary } from "intlayer";const myNestingContent = {  key: "key_of_my_second_dictionary",  content: {    // Mereferensikan seluruh dictionary:    fullNestedContent: nest("key_of_my_first_dictionary"),    // Mereferensikan nilai nested tertentu:    partialNestedContent: nest(      "key_of_my_first_dictionary",      "subContent.contentNumber"    ),  },} satisfies Dictionary;export default myNestingContent;

Sebagai parameter kedua, Anda dapat menentukan jalur ke nilai yang bersarang di dalam konten tersebut. Jika tidak ada jalur yang diberikan, seluruh konten dari kamus yang dirujuk akan dikembalikan.

Menggunakan Nesting dengan React Intlayer

Untuk menggunakan konten bersarang dalam komponen React, manfaatkan hook useIntlayer dari paket react-intlayer. Hook ini mengambil konten yang benar berdasarkan kunci yang ditentukan. Berikut adalah contoh cara menggunakannya:

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)}        {/* Output: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}      </p>      <p>        Nilai Bersarang Parsial: {partialNestedContent}        {/* Output: 0 */}      </p>    </div>  );};export default NestComponent;

Sumber Daya Tambahan

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

• Dokumentasi Intlayer CLI
• Dokumentasi React Intlayer
• Dokumentasi Next Intlayer

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