如何使用 next-intl 获取映射数据的动态翻译

Question

我是 nextjs 的新手，在使用 i18n 时遇到一些问题。我正在使用客户端渲染，并且了解了 i18n 和 l10n 如何工作的基本概念。但是，现在我必须为映射数据时创建的卡片部分提供翻译。我不确定这种动态翻译是如何运作的。我将提供我的代码：

"use client"

import { useState } from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { useTranslations } from "next-intl"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faDollarSign, faStar, faLocationDot, faChevronLeft, faChevronRight } from '@fortawesome/free-    solid-svg-icons'
import apartmentData from "../apartmentData";

export default function CardSlider() {
    const [sliderRef, setSliderRef] = useState(null);

    const t = useTranslations("Popular Apartments")

    const sliderSettings = {
        arrows: false,
        slidesToShow: 3,
        responsive: [
          {
            breakpoint: 1280,
            settings: {
            slidesToShow: 2,
          }
          },

          {
            breakpoint: 900,
            settings: {
            slidesToShow: 1,
          }
          },
        ]
      };

     const cards = apartmentData;
  
    return (
    
        <div>
            <div>
                <div>
                    <h2 >{t("section title")}</h2>
                    <div>
                        <button onClick={sliderRef?.slickPrev}>
                            <FontAwesomeIcon icon={ faChevronLeft } color="white" />
                        </button>
                        <button onClick={sliderRef?.slickNext}>
                            <FontAwesomeIcon icon={ faChevronRight } color="white" />
                        </button>
                    </div>
                </div>
                <Slider ref={setSliderRef} {...sliderSettings}>
                    {cards.map((card, index) => (
                        <div key={index}>
                            <div 
                                style={{ backgroundImage: `url(${card.imageSrc})` }}
                            >
                            </div>
                            <div>
                                <div>
                                    <h5>{card.title}</h5>
                                    <div>
                                        <FontAwesomeIcon icon={faStar} />
                                        <span className="ml-2 font-bold">{card.rating}</span>
                                    </div>  
                                </div>
                                <div>
                                    <div>
                                        <div>
                                            <FontAwesomeIcon icon={faLocationDot} />
                                        </div>
                                        <div>
                                            {card.locationText}
                                        </div>
                                    </div>  
                                    <div>
                                        <div>
                                            <FontAwesomeIcon icon={faDollarSign} className="w-6 h-3" />
                                        </div>
                                        <div>
                                            {card.pricingText}
                                        </div>
                                    </div>
                                </div>
                                <p>
                                    {card.description}
                                </p>
                            </div>
                            <button>
                                {t("btn")}
                            </button>
                        </div>
                    ))}
                </Slider>
            </div>
        </div>
    )
}

目前，该卡仅显示从apartmentData.js 文件获取的数据，但我需要将其翻译成另一种语言（bhs）。

我已经完成了

<h2>

和

<btn>

的基本翻译

<h2>{t("section title")}</h2>
<button>{t("btn")}</button>

但我对其余的（card.title、card. rating、card.locationText、ard.pricingText 和 card.description）感到困惑。有人知道该怎么做吗？ 我还将提供我的 bhs.json 文件，以防有帮助：

"Popular Apartments": {
        "section title": "Popularni Apartmani",
        "btn": "Rezervišite",
        "cards": [
            {
                "title": "Soho Paradise",
                "rating": "4.9",
                "locationText": "Ibiza, Španija",
                "pricingText": "USD 50/dan",
                "description": "fantastičan pogled na more"
            },
            {
                "title": "Hotel Baja",
                "rating": "5.0",
                "locationText": "Palo Alto, CA",
                "pricingText": "USD 19/dan",
                "description": "najbolje ocenjen smeštaj"
            },
            {
                "title": "Hudak Homes",
                "rating": "4.5",
                "locationText": "Arizoa, RAK",
                "pricingText": "USD 99/dan",
                "description": "cela vila za one sa dubokim džepom"
            },
            {
                "title": "Wyatt Residency",
                "rating": "4.8",
                "locationText": "Rim, Italija",
                "pricingText": "USD 39/dan",
                "description": "sakriven dragulj u srcu Rima"
            }
        ]
    }

谢谢:) 附：我在我的项目中使用 tailwind css，但我删除了样式以使代码更易于阅读。

Answer 1

我发现您可以使用

t.raw()

从翻译中获取原始数据。

所以你可以

t.raw("cards")

并获得卡片数组。

export default function CardSlider() {
  const t = useTranslations("Popular Apartments");

  ...

  return (
    <div>
      ...
        <Slider ref={setSliderRef} {...sliderSettings}>
          {t.raw("cards").map((card, index) => (
            <div key={index}>
              ...
            </div>
          ))}
        </Slider>
      ...
    </div>
  );
}