Nesting / مرجعية المحتوى الفرعي

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

في 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>        محتوى معشش بالكامل: {JSON.stringify(fullNestedContent)}        {/* النتيجة: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}      </p>      <p>        قيمة فرعية معششة: {partialNestedContent}        {/* النتيجة: 0 */}      </p>    </div>  );};export default NestComponent;

الموارد الإضافية

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

• توثيق CLI لـ Intlayer
• توثيق React Intlayer
• توثيق Next Intlayer

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