根据选择的语言,我需要破坏对象并获得所需的值。
我该怎么做,以免破坏整个对象?
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' });