有条件的动态解构

问题描述

根据所选的语言，我需要破坏对象并获得所需的值。
如何避免破坏整个对象？

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>

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

解决方法

在您要求销毁的整个过程中，您可以仅映射对象值，其值更具可伸缩性，当您拥有更多导航项目时会发生什么？

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

,

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

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