تكامل React: توثيق هوك useDictionary

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

استيراد useDictionary في React

يمكن دمج هوك useDictionary في تطبيقات React عن طريق استيراده بناءً على السياق:

• مكون العميل:

  typescript

  نسخ الكود

  نسخ الكود إلى الحافظة

  import { useDictionary } from "react-intlayer"; // يستخدم في مكونات React على جانب العميل

• مكون الخادم:

  typescript

  نسخ الكود

  نسخ الكود إلى الحافظة

  import { useDictionary } from "react-intlayer/server"; // يستخدم في مكونات React على جانب الخادم

المعاملات

يقبل الهوك معاملين:

1. dictionary: كائن قاموس معلن يحتوي على محتوى محلي لمفاتيح محددة.
2. locale (اختياري): اللغة المطلوبة. الافتراضي هو لغة السياق الحالي إذا لم يتم تحديدها.

القاموس

يجب إعلان جميع كائنات القاموس في ملفات محتوى منظمة لضمان سلامة الأنواع ومنع أخطاء وقت التشغيل. يمكنك العثور على تعليمات الإعداد هنا. إليك مثال على إعلان المحتوى:

import { t, type Dictionary } from "intlayer";const componentContent = {  key: "component-example",  content: {    title: t({      en: "Client Component Example",      fr: "Exemple de composant client",      es: "Ejemplo de componente cliente",    }),    content: t({      en: "This is the content of a client component example",      fr: "Ceci est le contenu d'un exemple de composant client",      es: "Este es el contenido de un ejemplo de componente cliente",    }),  },} satisfies Dictionary;export default componentContent;

مثال على الاستخدام في React

فيما يلي مثال على كيفية استخدام الخطاف useDictionary في مكون React:

import type { FC } from "react";import { useDictionary } from "react-intlayer";import componentContent from "./component.content";const ComponentExample: FC = () => {  const { title, content } = useDictionary(componentContent);  return (    <div>      <h1>{title}</h1>      <p>{content}</p>    </div>  );};

التكامل مع الخادم

إذا كنت تستخدم الخطاف useDictionary خارج IntlayerProvider، يجب توفير اللغة صراحة كمعامل عند عرض المكون:

import type { FC } from "react";import { useDictionary } from "react-intlayer/server";import clientComponentExampleContent from "./component.content";const ServerComponentExample: FC<{ locale: string }> = ({ locale }) => {  const { content } = useDictionary(clientComponentExampleContent, locale);  return (    <div>      <h1>{content.title}</h1>      <p>{content.content}</p>    </div>  );};

ملاحظات حول السمات

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

<button title={content.title}>{content.content}</button>

نصائح إضافية

• سلامة النوع: استخدم دائمًا Dictionary لتعريف القواميس الخاصة بك لضمان سلامة النوع.
• تحديثات التوطين: عند تحديث المحتوى، تأكد من اتساق جميع اللغات لتجنب فقدان الترجمات.

تركز هذه الوثائق على تكامل الخطاف useDictionary، مما يوفر نهجًا مبسطًا لإدارة المحتوى المحلي دون الاعتماد على وظائف المحرر المرئي.

تاريخ الوثيقة

• 5.5.10 - 2025-06-29: بداية التاريخ