React.js 中的条件导入 timeago 语言

Question

我有一个多语言 reactjs 应用程序，我需要有条件地导入使用的语言（在 html 中声明并用作道具，例如，如果我声明 data-locale="nl" 我需要导入荷兰语字符串）我尝试了 if 条件但它不起作用，因为您无法导入文件/包！

import TimeAgo from 'react-timeago';
if (locale === 'en') {
  import englishStrings from 'react-timeago/lib/language-strings/en';
} else if (locale === 'nl') {
  import dutchStrings from 'react-timeago/lib/language-strings/nl';
} else {
  import frenchStrings from 'react-timeago/lib/language-strings/fr';
}
import buildFormatter from 'react-timeago/lib/formatters/buildFormatter';

声明的语言应该在 buildFormatter 中，所以我可以在我的 JSX 中使用它，我有这个切换条件来选择正确的字符串

const locale = root_el.getAttribute("data-locale");

let langStrings;
switch(locale) {
  case 'en': {
    langStrings = englishStrings;
    break;
  }
  case 'nl': {
    langStrings = dutchStrings;
    break;
  }
  default:
    langStrings = frenchStrings;
}
const formatter = buildFormatter(langStrings);

关于如何正确执行此操作的任何建议/提示？

Answer 1

您可以使用延迟加载有条件地导入组件/模块，延迟加载也是性能改进的一个很好的步骤。 但是为了使用它，您必须将它分配给一个变量/常量，以便在其块的 scope 之外可以识别它。
你可以尝试做这样的事情：

import TimeAgo from 'react-timeago';
import React from 'react';
let langString;
if (locale === 'en') {
  langString = React.lazy(()=>import('react-timeago/lib/language-strings/en'));
} else if (locale === 'nl') {
  langString = React.lazy(()=> import('react-timeago/lib/language-strings/nl'));
} else {
  langString = React.lazy(()=>import('react-timeago/lib/language-strings/fr'));
}

根据条件，将适当的模块加载到langString变量中。