Lồng nội dung / Tham chiếu nội dung con

Cách hoạt động của lồng nội dung

Trong Intlayer, lồng nội dung được thực hiện thông qua hàm nest, cho phép bạn tham chiếu và tái sử dụng nội dung từ một từ điển khác. Thay vì sao chép nội dung, bạn có thể trỏ đến một module nội dung hiện có bằng khóa của nó.

Thiết lập lồng nội dung

Để thiết lập lồng nội dung trong dự án Intlayer của bạn, trước tiên bạn định nghĩa nội dung cơ sở mà bạn muốn tái sử dụng. Sau đó, trong một module nội dung riêng biệt, bạn sử dụng hàm nest để nhập nội dung đó.

Từ điển cơ sở

Dưới đây là ví dụ về một từ điển cơ sở để lồng vào một từ điển khác:

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;

Tham chiếu với Nest

Bây giờ, tạo một module nội dung khác sử dụng hàm nest để tham chiếu đến nội dung trên. Bạn có thể tham chiếu toàn bộ nội dung hoặc một giá trị lồng nhau cụ thể:

import { nest, type Dictionary } from "intlayer";

const myNestingContent = {
  key: "key_of_my_second_dictionary",
  content: {
    // Tham chiếu toàn bộ dictionary:
    fullNestedContent: nest("key_of_my_first_dictionary"),
    // Tham chiếu một giá trị lồng nhau cụ thể:
    partialNestedContent: nest(
      "key_of_my_first_dictionary",
      "subContent.contentNumber"
    ),
  },
} satisfies Dictionary;

export default myNestingContent;

Là tham số thứ hai, bạn có thể chỉ định một đường dẫn đến một giá trị lồng bên trong nội dung đó. Khi không có đường dẫn được cung cấp, toàn bộ nội dung của từ điển được tham chiếu sẽ được trả về.

Sử dụng Nesting với React Intlayer

Để sử dụng nội dung lồng trong một component React, hãy tận dụng hook useIntlayer từ package react-intlayer. Hook này lấy nội dung chính xác dựa trên key được chỉ định. Dưới đây là ví dụ về cách sử dụng:

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>
        Full Nested Content: {JSON.stringify(fullNestedContent)}
        {/* Kết quả: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}
      </p>
      <p>
        Giá trị Lồng Một Phần: {partialNestedContent}
        {/* Kết quả: 0 */}
      </p>
    </div>
  );
};

export default NestComponent;

Tài Nguyên Bổ Sung

Để biết thêm thông tin chi tiết về cấu hình và cách sử dụng, vui lòng tham khảo các tài nguyên sau:

• Tài liệu CLI của Intlayer
• Tài liệu React Intlayer
• Tài liệu Next Intlayer

Những tài nguyên này cung cấp thêm những hiểu biết sâu sắc về cách thiết lập và sử dụng Intlayer trong các môi trường khác nhau và với nhiều framework khác nhau.