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

Question

我正在尝试使用 useState 执行一项功能来更改我网站的语言。但是，由于我是新手，我在思考如何完成它的逻辑时遇到了问题。

第一个问题：单击 <li>.

时如何使用函数“handleLanguage”更改菜单语言

第二题：单击选项更改整个语言网站的最佳方法是什么？因为如我所见，现在如果我点击，只会改变一个组件。

代码：

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

How can I use the function "handleLanguage" to change the menu language when I click in?

我会将 handleLanguage 转换为柯里化函数，以便在作为回调附加到 select 语言时包含语言值。

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

Which would be the best way to change the whole language website by clicking on the option? Because as I see, now if I click, will change only one component.

为此，您可能需要 Lift State Up 一个共同的祖先，以便所有需要访问当前语言字符串或更新当前语言的组件。

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

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

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

How to use useState to display a different language

javascript

reactjs

react-hooks

localization

use-state