Ребята, подскажите, как правильно организовать на React'e такой функционал.
Есть два компонента (функциональных) - Main и Setting. Маin собирает несколько компонентов в себе, включая и Setting. Пока в Main включил функционал переключение языков, скорее всего это неправильно все-таки. Setting, в свою очередь, включает в себе switcher (input), который переключает языки app (en/ua). Теперь по коду:
Main.js
import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import Setting from '../components/_Setting/Setting';
import { contextArr } from 'App/db'; // перевод словосочетаний app
export default function Main() {
const location = useLocation();
let [lang, setLang] = useState('en');
const chooseLang = (event) => {
setLang(event.target.checked ? (lang = 'ua') : (lang = 'en'));
};
for (let key in contextArr) {
let elem = document.querySelector('.lng-' + key);
if (elem) {
elem.innerHTML = contextArr[key][lang];
}
}
useEffect(() => {
window.location.href = location.pathname + '#' + lang;
}, [location.pathname, lang]);
return (
<main id='main'>
<div className='container df'>
...
<Setting />
...
</div>
</main>
);
}
Setting.js
import Switcher from '../Switcher/Switcher';
export default function Setting() {
return (
<section id='setting'>
<Switcher
id='lang'
title='Language'
title_class='lng-set_subtitle1'
label_lt='English'
label_rt='Українська'
value={lang}
onClick={chooseLang}
/>
</section>
);
}
При данном варианте ничего не работает пока. Ранее был функционал переключение языков в компоненте Setting, но в таком случае переключение языков, распространялось только на компонент Setting, а не на весь app. Просьба не судит строго код, возможно я спросил некорректно, но я думаю функционал (чего я хочу) понятно объяснил.
За любую идею или подсказку буду благодарен.
