İç İçe Yerleştirme / Alt İçerik Referansı

İç İçe Yerleştirme Nasıl Çalışır

Intlayer'da iç içe yerleştirme, nest fonksiyonu aracılığıyla gerçekleştirilir ve başka bir sözlükten içeriği referans almanıza ve yeniden kullanmanıza olanak sağlar. İçeriği çoğaltmak yerine, mevcut bir içerik modülünü anahtarına göre işaret edebilirsiniz.

İç İçe Yerleştirmeyi Ayarlama

Intlayer projenizde iç içe yerleştirmeyi ayarlamak için, önce yeniden kullanmak istediğiniz temel içeriği tanımlayın. Ardından, ayrı bir içerik modülünde, o içeriği içe aktarmak için nest fonksiyonunu kullanın.

Temel Sözlük

Aşağıda, başka bir sözlükte iç içe yerleştirilecek temel sözlük örneği verilmiştir:

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 ile Referans Alma

Şimdi, yukarıdaki içeriği referans almak için nest fonksiyonunu kullanan başka bir içerik modülü oluşturun. Tüm içeriği veya belirli bir iç içe değeri referans alabilirsiniz:

import { nest, type Dictionary } from "intlayer";

const myNestingContent = {
  key: "key_of_my_second_dictionary",
  content: {
    // Tüm sözlüğü referans alır:
    fullNestedContent: nest("key_of_my_first_dictionary"),
    // Belirli bir iç içe değeri referans alır:
    partialNestedContent: nest(
      "key_of_my_first_dictionary",
      "subContent.contentNumber"
    ),
  },
} satisfies Dictionary;

export default myNestingContent;

İkinci parametre olarak, o içerik içindeki iç içe bir değere giden bir yol belirtebilirsiniz. Yol sağlanmadığında, referans alınan sözlüğün tüm içeriği döndürülür.

React Intlayer ile İç İçe Yerleştirmeyi Kullanma

Bir React bileşeninde iç içe yerleştirilmiş içeriği kullanmak için, react-intlayer paketinden useIntlayer hook'unu kullanın. Bu hook, belirtilen anahtara göre doğru içeriği alır. İşte nasıl kullanılacağına dair bir örnek:

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>
        Tam İç İçe Yerleştirilmiş İçerik: {JSON.stringify(fullNestedContent)}
        {/* Çıktı: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}
      </p>
      <p>
        Kısmi İç İçe Yerleştirilmiş Değer: {partialNestedContent}
        {/* Çıktı: 0 */}
      </p>
    </div>
  );
};

export default NestComponent;

Ek Kaynaklar

Yapılandırma ve kullanım hakkında daha detaylı bilgi için aşağıdaki kaynaklara başvurun:

• Intlayer CLI Dokümantasyonu
• React Intlayer Dokümantasyonu
• Next Intlayer Dokümantasyonu

Bu kaynaklar, farklı ortamlar ve çeşitli çerçevelerde Intlayer'ın kurulumu ve kullanımı hakkında daha fazla bilgi sağlar.