根据选择的语言,我需要破坏对象并获得所需的值。
我该怎么做,以免破坏整个对象?

const translate = {
   "navMenu1": {
      "en": "Menu 1",
      "ru": "Меню 1"
   },
   "navMenu2": {
      "en": "Menu 2",
      "ru": "Меню 2"
   },
   "navMenu3": {
      "en": "Menu 3",
      "ru": "Меню 3"
   }
}

const Header = props => {
  const { lang } = props;

  const {
    navMenu1,
    navMenu2,
    navMenu3
  } = translate;

  return (
    <header className={cnGreetingHeader}>
      <div>-Logo-</div>
      <nav className={cnNav}>
        <div className={cnItem}>{navMenu1[lang]}</div>
        <div className={cnItem}>{navMenu2[lang]}</div>
        <div className={cnItem}>{navMenu3[lang]}</div>
      </nav>
    </header>
  );
};
我要代替
<div className={cnItem}>{navMenu1[lang]}</div>
使用
<div className={cnItem}>{navMenu1}</div>
重要提示:如果可能,我想要一个使用解构分配的答案。

最佳答案

您可以进行嵌套解构,并将外部名称作为变量。

const
    translate = { navMenu1: { en: "Menu 1", ru: "Меню 1" }, navMenu2: { en: "Menu 2", ru: "Меню 2" }, navMenu3: { en: "Menu 3", ru: "Меню 3" } },
    Header = props => {
        const
            { lang } = props,
            {
                navMenu1: { [lang]: navMenu1 },
                navMenu2: { [lang]: navMenu2 },
                navMenu3: { [lang]: navMenu3 }
            } = translate;

        console.log(navMenu1);
        console.log(navMenu2);
        console.log(navMenu3);
    };

Header({ lang: 'en' });

08-06 02:26
查看更多