时间戳

首页 > 解决方案 > 如何在我的轮播部分实现 i18next 功能？

javascript - 如何在我的轮播部分实现 i18next 功能？

问题描述

我使用轮播作为我的页面横幅，其中包括图像、标题和副标题，当我使用 i18next 翻译网页语言时，我如何也将标题和副标题更改为其他语言？下面是示例代码：

轮播.js

import React, { useState } from "react";
import "./Carousel.css";
import { images } from "../Helpers/CarouselData";


function Carousel() {
  const [currImg, setCurrImg] = useState(0);

  return (
    <div className="carousel">
      <div
        className="carouselInner"
        style={{ backgroundImage: `url(${images[currImg].img})` }}
      >
        <div
          className="left"
          onClick={() => {
            currImg > 0 && setCurrImg(currImg - 1);
          }}
        >
          
        </div>
        <div className="center">
          <h1>{images[currImg].title}</h1>
          <p>{images[currImg].subtitle}</p>
        </div>
        <div
          className="right"
          onClick={() => {
            currImg < images.length - 1 && setCurrImg(currImg + 1);
          }}
        >
          
        </div>
      </div>
    </div>
  );
}

export default Carousel;

轮播数据.js

import City from "../Images/city.jpg";
import Salvador from "../Images/salvador.jpg";
import Ubc from "../Images/ubc.jpg";

export const images = [
  {
    title: "Salvador, Brazil",
    subtitle: "The Best City in the World",
    img: Salvador,
  },
  {
    title: "UBC (Vancouver)",
    subtitle: "The University of British Columbia",
    img: Ubc,
  },
];

最后，我const { t , i18n} = useTranslation();用来标记需要更改的单词{t("something")}。

标签： javascriptreactjs

解决方案

创建图像数组需要在渲染循环中完成，您可以在此处为标题调用 t 函数..：

推荐阅读