条件（动态）解构

Question

根据所选的语言，我需要破坏对象并获得所需的值。
我该怎么做才能不破坏整个对象？

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>

重要提示：如果可能，我想要一个使用解构赋值的答案。

Answer 1

虽然你问破坏，你可以只映射对象值，它更具可扩展性，当你有更多的导航项目时会发生什么？

<nav className={cnNav}>
  {Object.values((navMenu) => (
    <div key={navMenu.id} className={cnItem}>
      {navMenu[lang]}
    </div>
  ))}
</nav>