如何在翻译中映射对象和数组

Question

我的翻译数据有 2 个 JSON 文件 -> EN 文件和 FR 文件。

我正在使用 react-i18next 以这种方式处理我的翻译，效果很好，但由于我有可重复的组件，我需要映射/循环翻译以获得正确的输出

示例

zh:

export const EN = {
    page1: {
      section1 {
         titles: {
            title1: "title1_name",
            title2: "title2_name",
            title3: "title3_name"
          },
          buttons: {
             button1 : "button1_name",
             button2 : "button2_name",
             button3 : "button3_name",
          }
       }
       section2 { THE SAME AS SECTION 1 }
       section3 { THE SAME AS SECTION 1 }

    page2 { SAME AS PAGE 1 } 

同样的事情也适用于 FR 文件（用法语翻译代替）

如何实现从 section1 和 page1 映射所有例如标题。使用map() 是否正确？

现在我的解决方案是使用{t page1.section1.0.titles.title1}，它当然会在任何地方打印相同的标题 - 在本例中为 title1_name

使用电流输出 {t page1.section1.0.titles.title1} :

slider1：title1_name

slider2：title1_name

滑块3：title1_name

滑块4：title1_name 以此类推……

预期输出：

slider1：title1_name，button1_name

滑块2：title2_name，button2_name

slider3：title4_name，button3_name

slider4: title4_name, button4_name

Answer 1

这可行，您需要进行翻译，但这使您可以访问每个页面和部分中的标题对象：

    Object.entries(EN).map(([key,object]) => {

      Object.entries(object).map(([token, value]) => {
          console.log(`${token} : ${value}`);
          Object.keys(value).map((key, index) => {
            console.log(value[key]); // titles access here
        });
      });
    });

Answer 2

当你迭代一个对象时，你会想要使用一个函数来从数组中的对象中获取数据。传统上是Object.keys()，但较新版本的Javascript 引入了Object.values() 和Object.entries()，根据具体情况可能会非常有用。您可以从其键中访问值，例如 myObject[myKey]，因此 Object.keys() 可以在任何情况下工作。

您的 JSON 文件的当前结构并不理想，因为 titles 和 buttons 具有完全独立的对象，因此您无法确保标题文本与按钮文本的数量相同。我稍后会解决这个问题，但首先这里是您可以使用当前结构的一种方式。

const MySlider = () => {
  const currentlang = ... // get the EN or FR object based on your current language

  // an array of all the title texts
  const titles = Object.values(currentlang.page1.section1.titles);

  // an array of all the button texts
  const buttons = Object.values(currentlang.page1.section1.buttons);

  return (
    <Slider>
      {titles.map((title, i) => ( // map through the titles
        <Slide
          title={title}
          buttonText={buttons[i]} // get the button text with the same index -- how do we know this is valid?
          key={i} // i as a key is not great
        />
      ))}
    </Slider>
  );
};

使用一些虚拟组件，以便您可以渲染它：

const Slider: React.FC = ({ children }) => <div>{children}</div>;

interface SliderProps {
  title: string;
  buttonText: string;
}

const Slide: React.FC<SliderProps> = ({ title, buttonText }) => {
  return (
    <div>
      <h2>{title}</h2>
      <button>{buttonText}</button>
    </div>
  );
};

我建议按幻灯片而不是按titles 和buttons 对标签进行分组。这样可以确保标题和按钮匹配，如果您想自定义顺序，可以通过滑动键轻松访问，并为我们的组件提供独特的 key 属性。

export const EN = {
  page1: {
    section1: {
      slides: {
        sale: {
          title: "title1_name",
          button: "button1_name"
        },
        featured: {
          title: "title2_name",
          button: "button2_name"
        },
        promo: {
          title: "title3_name",
          button: "button3_name"
        },
      }
    }
  }
};

const MySlider = () => {
  const currentlang = ... // get the EN or FR object based on your current language

  // keyed object of slides
  const slides = currentlang.page1.section1.slides;

  return (
    <Slider>
      {Object.entries(slides).map(
        // Object.entries gives us an array with elements key and value
        ([key, value]) => (
          <Slide
            title={value.title}
            buttonText={value.button}
            key={key}
          />
        )
      )}
    </Slider>
  );
};

允许自定义排序的基于键的方法：

const MySlider = () => {
  const currentlang = ... // get the EN or FR object based on your current language

  // keyed object of slides
  const slides = currentlang.page1.section1.slides;

  // helper function renders the slide for a given key
  const renderSlide = (key: keyof typeof slides) => {
    const {title, button} = slides[key];
    return (
      <Slide 
        title={title}
        buttonText={button}
      />
    )
  }

  return (
    <Slider>
      {renderSlide("promo")}
      {renderSlide("sale")}
      {renderSlide("featured")}
    </Slider>
  );
};

Answer 3

对象上的 .map 函数没有选项，但您可以使用 Object.keys 选项。：

var myObject = { 'a': 1, 'b': 2, 'c': 3 };

Object.keys(myObject).map(function(key, index) {
  myObject[key] *= 2;
});

console.log(myObject);
// => { 'a': 2, 'b': 4, 'c': 6 }

map function for objects (instead of arrays)

Medium MultiLanguage Website