localization - 如何使用 useIntl 钩子和本地化数组元素

Question

我有一个基本的反应功能组件，我绑定了一个数组，其中有要本地化的字符串。还有其他方法吗？我正在尝试如下，它说“无效的挂钩呼叫”

import { useIntl } from "react-intl";

const NavBasicExample: React.FunctionComponent = () => {  
  return (
      <Nav               
        groups={navLinkGroups}        
      />
    </div>
  );
};



const navLinkGroups: INavLinkGroup[] = [
  {
    name: getFormattedString(Strings.details),//This fails and says invalidHookCall
    links: [{ name: Strings.appDetails, url: "" }]
  },
  {
    name: Strings.capabilities,
    links: [
      { name: Strings.tabs},
      { name: Strings.bots}
    ]
  }
];



const getFormattedString = (inputString: string) => {
  const intl = useIntl(); //This fails.
  return intl.formatMessage({ id: "details", defaultMessage: "Login });
};

标签： localizationreact-hookshookreact-functional-componentreact-intl

Answer 1

问题是您正在从非反应函数调用 Hook。你不能这样做。尝试将“navLinkGroups”移动到“NavBasicExample”中，它应该可以工作

import { useIntl } from "react-intl";

const NavBasicExample: React.FunctionComponent = () => {  
  const intl = useIntl();
  

  const navLinkGroups: INavLinkGroup[] = [
    {
      name: getFormattedString(Strings.details),
      links: [{ name: Strings.appDetails, url: "" }]
    },
    {
      name: Strings.capabilities,
      links: [
        { name: Strings.tabs},
        { name: Strings.bots}
      ]
    }
  ];
  
  const getFormattedString = (inputString: string) => {
    return intl.formatMessage({ id: "details", defaultMessage: "Login" });
  };

  return (
      <Nav               
        groups={navLinkGroups}        
      />
    </div>
  );


};