المؤلف:
    إنشاء:2025-02-07آخر تحديث:2025-06-29

    التعشيش / الإشارة إلى المحتوى الفرعي

    كيف يعمل التعشيش

    في Intlayer، يتم تحقيق التعشيش من خلال وظيفة nest، التي تتيح لك الإشارة إلى وإعادة استخدام المحتوى من قاموس آخر. بدلاً من تكرار المحتوى، يمكنك الإشارة إلى وحدة محتوى موجودة باستخدام مفتاحها.

    إعداد التداخل

    لإعداد التداخل في مشروع Intlayer الخاص بك، تقوم أولاً بتعريف المحتوى الأساسي الذي تريد إعادة استخدامه. ثم، في وحدة محتوى منفصلة، تستخدم دالة nest لاستيراد هذا المحتوى.

    القاموس الأساسي

    فيما يلي مثال على قاموس أساسي للتداخل في قاموس آخر:

    firstDictionary.content.ts
    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 للإشارة إلى المحتوى أعلاه. يمكنك الإشارة إلى المحتوى بالكامل أو قيمة محددة متداخلة:

    secondDictionary.content.ts
    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;

    كمعامل ثانٍ، يمكنك تحديد المسار إلى قيمة متداخلة داخل هذا المحتوى. عندما لا يتم توفير مسار، يتم إرجاع محتوى القاموس المرجعي بالكامل.

    إعداد التعشيش

    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
    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;

    موارد إضافية

    لمزيد من المعلومات التفصيلية حول التكوين والاستخدام، راجع الموارد التالية:

    توفر هذه الموارد مزيدًا من الأفكار حول إعداد واستخدام Intlayer في بيئات مختلفة ومع أطر عمل متنوعة.

    ملف
    Markdown