Nội dung có điều kiện / Điều kiện trong Intlayer

Cách hoạt động của Điều kiện

Trong Intlayer, nội dung có điều kiện được thực hiện thông qua hàm cond, hàm này ánh xạ các điều kiện cụ thể (thường là giá trị boolean) tới nội dung tương ứng của chúng. Cách tiếp cận này cho phép bạn chọn nội dung một cách động dựa trên một điều kiện nhất định. Khi tích hợp với React Intlayer hoặc Next Intlayer, nội dung phù hợp sẽ được tự động chọn dựa trên điều kiện được cung cấp tại thời điểm chạy.

Thiết lập Nội dung Có điều kiện

Để thiết lập nội dung có điều kiện trong dự án Intlayer của bạn, hãy tạo một module nội dung bao gồm các định nghĩa điều kiện của bạn. Dưới đây là các ví dụ ở nhiều định dạng khác nhau.

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

const myConditionalContent = {
  key: "my_key",
  content: {
    myCondition: cond({
      true: "nội dung của tôi khi điều kiện đúng",
      false: "nội dung của tôi khi điều kiện sai",
      fallback: "nội dung của tôi khi điều kiện không thỏa mãn", // Tùy chọn
    }),
  },
} satisfies Dictionary;

export default myConditionalContent;

Nếu không khai báo fallback, khóa cuối cùng được khai báo sẽ được sử dụng làm fallback nếu điều kiện không được thỏa mãn.

Sử dụng Nội dung Có điều kiện với React Intlayer

Để sử dụng nội dung có điều kiện trong một component React, hãy import và sử dụng hook useIntlayer từ package react-intlayer. Hook này lấy nội dung cho khóa được chỉ định và cho phép bạn truyền vào một điều kiện để chọn kết quả phù hợp.

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

const ConditionalComponent: FC = () => {
  const { myCondition } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* Kết quả: nội dung của tôi khi điều kiện đúng */
          myCondition(true)
        }
      </p>
      <p>
        {
          /* Kết quả: nội dung của tôi khi điều kiện là false */
          myCondition(false)
        }
      </p>
      <p>
        {
          /* Kết quả: nội dung của tôi khi điều kiện không hợp lệ */
          myCondition("")
        }
      </p>
      <p>
        {
          /* Kết quả: nội dung của tôi khi điều kiện không hợp lệ */
          myCondition(undefined)
        }
      </p>
    </div>
  );
};

export default ConditionalComponent;

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 Intlayer cho Next

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 trên nhiều môi trường và framework khác nhau.