Reactjs 如何在转换中映射对象和数组

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

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

示例

嗯:

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

如何实现映射第1节和第1页的所有标题。使用

map（）

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

使用
{t page1.0.titles.title1}
的当前输出：

幻灯片1：标题1\u名称

幻灯片2：标题1\u名称

幻灯片3：标题1\u名称

幻灯片4：标题1\u名称
等等等等

预期输出：

幻灯片1：标题1\u名称，按钮1\u名称

幻灯片2：标题2\u名称，按钮2\u名称

幻灯片3：标题4\u名称，按钮3\u名称

滑块4：标题4\u名称，按钮4\u名称
对象上的.map函数没有选项，但您可以使用
对象.keys
选项：


var myObject={'a'：1，'b'：2，'c'：3}；
Object.keys（myObject）.map（函数（键，索引）{
myObject[key]*=2；
});
console.log（myObject）；
//=>{'a'：2，'b'：4，'c'：6}
这是可行的，您需要进行翻译，但这样您就可以访问每个页面和部分中的title对象：

    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
        });
      });
    });

当您在对象上迭代时，您需要使用一个函数从数组中的对象获取数据。传统上是这样的，但是引入了新版本的Javascript，根据具体情况，它可能非常有用。您可以从其键访问值，如
myObject[myKey]
因此
Object.keys（）
可以在任何情况下工作

JSON文件的当前结构并不理想，因为
标题
和
按钮
的对象完全不同，因此无法确保标题文本的数量与按钮文本的数量相同。我将在稍后讨论这个问题，但首先这里有一种方法可以使用当前结构

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>
  );
};

constmyslider=（）=>{
const currentlang=…//根据当前语言获取EN或FR对象
//幻灯片的键控对象
常量幻灯片=currentlang.page1.section1.slides；
返回(
{Object.entries（slides.map）(
//Object.entries为我们提供了一个包含key和value元素的数组
（[key，value]）=>(
)
)}
);
};

允许自定义订购的基于密钥的方法：

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>
  );
};

constmyslider=（）=>{
const currentlang=…//根据当前语言获取EN或FR对象
//幻灯片的键控对象
常量幻灯片=currentlang.page1.section1.slides；
//辅助函数为给定的关键点渲染幻灯片
const renderSlide=（键：keyof typeof slides）=>{
常量{title，button}=幻灯片[键]；
返回(
)
}
返回(
{renderSlide（“promo”）}
{renderSlide（“出售”）}
{renderSlide（“特色”）}
);
};
但什么是myObject？因为我有两个（翻译EN和FR），所以我需要使用。你能根据我的例子具体说明一下吗？在讲座和文档中投入一些精力，添加了一篇关于如何使用i18next创建多语言网站的中篇文章。虽然与此无关，但我的翻译仍然有效。{Object.values（currentLang.page1.section1.titles）。map（title=>（））}？在代码的更高层（外部渲染），您将获得基于当前语言的currentLang对象进行翻译。有用的文档：，嘿，Eliot，您是否需要
EN.page2
与
EN.page1
相同？@jburtonev不，这只是一个使其更短的示例-解释我的json文件结构。我需要的是打印出第1页和第1部分的所有标题-你可以看到我正在使用UseTransformation中的{t}，所以我现在正在打印它
{t page1.section1.0.titles.title1}
，但这只是打印每个地方的title1_name，请在您的问题中添加预期的输出对象，然后我将能够添加答案。我更新了我的帖子，如果没有意义，请让我知道，现在看看。感谢您的回答。它确实能在我的控制台上打印出我所需要的所有内容，虽然是的，我需要弄清楚语言的问题。没问题，艾略特。很好的解释，我会尽力跟上。尽管我的翻译来自于i18next UseTransation=所以我使用的是
{t
something`}，我应该创建函数currentLang而不是它吗？
currentLang
只是语言对象的一个变量。我正在设置const currentLang=EN来玩它。
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>
  );
};

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>
  );
};