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

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

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

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

استخدام التعشيش مع React Intlayer

لاستخدام المحتوى المتعشش في مكون React، استخدم الخطاف useIntlayer من حزمة react-intlayer. يسترجع هذا الخطاف المحتوى الصحيح بناءً على المفتاح المحدد. إليك مثال على كيفية استخدامه:

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)}        {/* الإخراج: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}      </p>      <p>        Partial Nested Value: {partialNestedContent}        {/* الإخراج: 0 */}      </p>    </div>  );};export default NestComponent;

موارد إضافية

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

• وثائق Intlayer CLI
• وثائق React Intlayer
• وثائق Next Intlayer

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