جلب الدالة

إعلانات الدوال

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

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

typescript

1import type { DeclarationContent } from "intlayer";
2
3const functionContent = {
4  key: "function_content",
5  content: {
6    text: () => "This is the content rendered by a function",
7  },
8} satisfies DeclarationContent;
9
10export default functionContent;

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

جلب الدوال غير المتزامنة

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

إليك مثال لدالة غير متزامنة تحاكي جلب البيانات من الخادم:

typescript

1import { setTimeout } from "node:timers/promises";
2import type { DeclarationContent } from "intlayer";
3
4const fakeFetch = async (): Promise<string> => {
5  // انتظر 200 مللي ثانية لمحاكاة Fetch من الخادم
6  return await setTimeout(200).then(
7    () => "This is the content fetched from the server"
8  );
9};
10
11const asyncFunctionContent = {
12  key: "async_function",
13  content: { text: fakeFetch },
14} satisfies DeclarationContent;
15
16export default asyncFunctionContent;

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

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

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

javascript

1import { useIntlayer } from "react-intlayer";
2
3const MyComponent = () => {
4  const functionContent = useIntlayer("function_content");
5  const asyncFunctionContent = useIntlayer("async_function_content");
6
7  return (
8    <div>
9      <p>{functionContent.text}</p>
10      {/* الناتج: This is the content rendered by a function */}
11      <p>{asyncFunctionContent.text}</p>
12      {/* الناتج: This is the content fetched from the server */}
13    </div>
14  );
15};
16
17export default MyComponent;

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

رابط GitHub للتوثيق

تعداد Intlayer مع Next.js

جلب الدالة

إعلانات الدوال

جلب الدوال غير المتزامنة

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

في هذه الصفحة