如何使用useState来显示不同的语言

Question

我正在尝试使用useState执行一个函数来更改我的网站语言。然而，由于我是新手，我在思考如何做到这一点的逻辑时遇到了问题。

第一个问题：我如何使用函数"；handleLanguage"；以在单击<li>时更改菜单语言。

第2个问题：点击选项更改整个语言网站的最佳方式是什么？因为正如我所看到的，现在如果我单击，将只更改一个组件。

代码：

const languages = {
en: {
about: "about",
project: "project",
contact: "contact",
slogan: "Think the Design, and I design the Code.",
button: "Learn more",
},
ptbr: {
about: "sobre",
project: "projetos",
contact: "contatos",
slogan: "Think the Design, and I design the Code.",
button: "Learn more",
},
jp: {
about: "nihon",
project: "nihon",
contact: "nihon",
slogan: "nihon",
button: "nihon",
},
ru: {
about: "руский",
project: "руский",
contact: "руский",
slogan: "руский",
button: "руский",
},
};
const RightNav = ({ open }) => {
const [text, setText] = useState("en");
const handleLanguage = (e) => {
setText("ptbr");
};
return (
<>
<Ul open={open}>
<li>{languages.en.about}</li>
<li>{languages.en.project}</li>
<li>{languages.en.contact}</li>
<li className="image">
<img src={English} alt="EN" />
</li>
<li className="image">
<img src={Japanese} alt="JP" />
</li>
<li className="image">
<img src={Russian} alt="RU" />
</li>
<li className="image">
<img src={Portuguese} alt="PT-BR" onClick={handleLanguage} />
</li>
</Ul>
</>
);
};

Answer 1

如何使用函数"handleLanguage"；更改菜单点击时使用的语言？

当附加为选择语言的回调时，我会将handleLanguage转换为一个curried函数，以包含一个语言值。

const RightNav = ({ open }) => {
const [language, setLanguage] = useState("en");
const handleLanguage = language => event => {
setLanguage(language);
};
return (
<>
<Ul open={open}>
<li>{languages[language].about}</li>
<li>{languages[language].project}</li>
<li>{languages[language].contact}</li>
<li className="image">
<img src={English} alt="EN" onClick={handleLanguage('en')} />
</li>
<li className="image">
<img src={Japanese} alt="JP" onClick={handleLanguage('jp')} />
</li>
<li className="image">
<img src={Russian} alt="RU" onClick={handleLanguage('ru')} />
</li>
<li className="image">
<img src={Portuguese} alt="PT-BR" onClick={handleLanguage('ptbr')} />
</li>
</Ul>
</>
);
};

通过点击选项？因为正如我所看到的，现在如果我点击，就会改变只有一个组件。

为此，您可能需要将状态提升到一个公共祖先，以便所有需要访问当前语言字符串或更新当前语言的组件。

使用Context API实际上可能是一个更好的用例，因此您不需要将所有字符串数据作为道具显式传递给每个组件。

这是许多本地化库使用的类似方法，即它们有一个sting提供程序，并公开一个函数来获取字符串id，而当前的集合语言返回正确的本地化文本。React intl就是这样一个流行的本地化库。