Tích hợp React: Tài liệu Hook useI18n

Phần này cung cấp hướng dẫn chi tiết về cách sử dụng hook useI18n trong các ứng dụng React, giúp thực hiện việc bản địa hóa nội dung hiệu quả.

Nhập useI18n trong React

Hook useI18n có thể được nhập và tích hợp vào các ứng dụng React tùy theo ngữ cảnh như sau:

• Client Components (Thành phần phía khách):

  typescript

  Sao chép nội dung

  Sao chép mã

  Sao chép mã vào clipboard

  import { useI18n } from "react-intlayer"; // Sử dụng trong các thành phần React phía client

• Server Components (Thành phần phía máy chủ):

Tham số

Hook này nhận hai tham số:

1. namespace: Không gian tên của từ điển để giới hạn phạm vi các khóa dịch.
2. locale (tùy chọn): Ngôn ngữ mong muốn. Nếu không được chỉ định, ngôn ngữ trong ngữ cảnh sẽ được sử dụng làm mặc định.

Từ điển

Tất cả các khóa trong từ điển phải được khai báo trong các tệp khai báo nội dung để tăng cường an toàn kiểu và tránh lỗi. Hướng dẫn cấu hình có thể được tìm thấy tại đây.

Ví dụ sử dụng trong React

Ví dụ về cách sử dụng hook useI18n trong các thành phần React:

import type { FC } from "react";
import { ClientComponentExample, ServerComponentExample } from "@components";
import { IntlayerProvider } from "react-intlayer";
import { useI18n, IntlayerServerProvider } from "react-intlayer/server";
import { Locales } from "intlayer";

const App: FC<{ locale: Locales }> = ({ locale }) => {
  const t = useI18n("home-page", locale);

  return (
    <>
      <p>{t("introduction")}</p>
      <IntlayerProvider locale={locale}>
        <ClientComponentExample />
      </IntlayerProvider>
      <IntlayerServerProvider locale={locale}>
        <ServerComponentExample />
      </IntlayerServerProvider>
    </>
  );
};

import type { FC } from "react";
import { useI18n } from "react-intlayer";

const ComponentExample: FC = () => {
  const t = useI18n("component-example");

  return (
    <div>
      <h1>{t("title")}</h1> {/* Hiển thị tiêu đề */}
      <p>{t("description")}</p> {/* Hiển thị mô tả */}
    </div>
  );
};

tsx fileName="src/components/ServerComponentExample.tsx" codeFormat="typescript"
import { useI18n } from "react-intlayer/server";

const ServerComponentExample = () => {
  const t = useI18n("server-component");

  return (
    <div>
      <h1>{t("title")}</h1> {/* Hiển thị tiêu đề */}
      <p>{t("description")}</p> {/* Hiển thị mô tả */}
    </div>
  );
};

Xử lý thuộc tính

Khi bản địa hóa các thuộc tính, truy cập giá trị dịch một cách thích hợp:

<!-- Đối với các thuộc tính hỗ trợ truy cập (ví dụ: aria-label), sử dụng .value vì cần chuỗi thuần túy --><button aria-label={t("button.ariaLabel").value}>{t("button.text")}</button>

Tài nguyên bổ sung

• Trình chỉnh sửa trực quan Intlayer: Để có trải nghiệm quản lý nội dung trực quan hơn, tham khảo tài liệu trình chỉnh sửa trực quan tại đây.

const { useI18n } = require("react-intlayer/server");const ServerComponentExample = () => {  const t = useI18n("server-component");  return (    <div>      <h1>{t("title")}</h1>      <p>{t("description")}</p>    </div>  );};

Xử lý Thuộc tính

Khi bản địa hóa các thuộc tính, truy cập giá trị dịch một cách thích hợp:

<!-- Đối với các thuộc tính hỗ trợ truy cập (ví dụ: aria-label), sử dụng .value vì yêu cầu chuỗi thuần túy --><button aria-label={t("button.ariaLabel").value}>{t("button.text")}</button>

Tài nguyên Bổ sung

• Trình chỉnh sửa trực quan Intlayer: Để có trải nghiệm quản lý nội dung trực quan hơn, hãy tham khảo tài liệu trình chỉnh sửa trực quan tại đây.

Phần này đặc biệt đề cập đến việc tích hợp hook useI18n trong các ứng dụng React, giúp đơn giản hóa quá trình bản địa hóa và đảm bảo tính nhất quán của nội dung trên các ngôn ngữ khác nhau.