جلب الوظائف

يسمح Intlayer لك بإعلان وظائف المحتوى في وحدات المحتوى الخاصة بك، والتي يمكن أن تكون متزامنة أو غير متزامنة. عند بناء التطبيق، يقوم Intlayer بتنفيذ هذه الوظائف للحصول على نتيجة الوظيفة. يجب أن تكون القيمة المرجعة كائن JSON أو قيمة بسيطة مثل سلسلة نصية أو رقم.

تحذير: جلب الوظائف غير متاح حاليًا في إعلان محتوى JSON وملفات إعلانات المحتوى البعيدة.

إعلانات الوظائف

إليك مثال على وظيفة متزامنة بسيطة لجلب المحتوى:

import type { Dictionary } from "intlayer";const functionContent = {  key: "function_content",  content: {    text: () => "هذا هو المحتوى الذي يتم عرضه بواسطة وظيفة",  },} satisfies Dictionary;export default functionContent;

في هذا المثال، يحتوي المفتاح text على وظيفة تُرجع سلسلة نصية. يمكن عرض هذا المحتوى في مكونات React الخاصة بك باستخدام حزم المفسر الخاصة بـ Intlayer مثل react-intlayer.

جلب الوظائف غير المتزامنة

بالإضافة إلى الوظائف المتزامنة، يدعم Intlayer الوظائف غير المتزامنة، مما يتيح لك جلب البيانات من مصادر خارجية أو محاكاة استرجاع البيانات باستخدام بيانات وهمية.

فيما يلي مثال على وظيفة غير متزامنة تحاكي جلب البيانات من الخادم:

import { setTimeout } from "node:timers/promises";import type { Dictionary } from "intlayer";const fakeFetch = async (): Promise<string> => {  // انتظر لمدة 200 مللي ثانية لمحاكاة الجلب من الخادم  return await setTimeout(200).then(    () => "هذا هو المحتوى الذي تم جلبه من الخادم"  );};const asyncFunctionContent = {  key: "async_function",  content: { text: fakeFetch },} satisfies Dictionary;export default asyncFunctionContent;

في هذه الحالة، تحاكي وظيفة fakeFetch تأخيرًا لمحاكاة وقت استجابة الخادم. يقوم Intlayer بتنفيذ الوظيفة غير المتزامنة ويستخدم النتيجة كمحتوى للمفتاح text.

استخدام المحتوى المستند إلى الوظائف في مكونات React

لاستخدام المحتوى المستند إلى الوظائف في مكون React، تحتاج إلى استيراد useIntlayer من react-intlayer واستدعائها باستخدام معرف المحتوى لاسترداد المحتوى. إليك مثال:

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const MyComponent: FC = () => {  const functionContent = useIntlayer("function_content");  const asyncFunctionContent = useIntlayer("async_function_content");  return (    <div>      <p>{functionContent.text}</p>      {/* الإخراج: هذا هو المحتوى الذي يتم عرضه بواسطة وظيفة */}      <p>{asyncFunctionContent.text}</p>      {/* الإخراج: هذا هو المحتوى الذي تم جلبه من الخادم */}    </div>  );};export default MyComponent;