如何使用 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

如何使用“handleLanguage”功能更改菜单 点击时的语言？

我会将handleLanguage 转换为柯里化函数以在附加为回调以选择语言时包含语言值。

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

更改整个语言网站的最佳方式是 点击选项？因为正如我所见，现在如果我点击，将会改变 只有一个组件。

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

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

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