React如何根据条件选择导入模块函数？JSX编译报错求助

首先说你遇到的「Unexpected token if」错误——这是因为JSX的花括号{}里只能放表达式，不能直接写if这类语句。你现在把完整的if判断塞进了<Col>的花括号里，完全不符合JSX的语法规则，这是核心问题。

下面分两步帮你解决：

1. 先修复JSX语法错误 #

推荐两种清晰的修复方式，选哪种看你代码复杂度：

方式一：提前把渲染逻辑提取到变量（最推荐） #

把条件判断和数组映射的逻辑放到组件return语句之前，再把结果变量放到JSX里：

// 在组件的渲染逻辑区（比如return之前）处理
const faqContent = language === 'en' 
  ? Api.getFaqText().map(b => {
      // 只渲染id=1的项，其他返回null避免React警告
      return b.id === 1 ? (
        <BHead 
          textClass={b.classname} 
          key={b.id} 
          title={<div dangerouslySetInnerHTML={{__html: b.title}} />} 
        />
      ) : null;
    })
  : null; // 非英文时可以渲染null，或者你需要的默认内容

// 然后在JSX中直接引用变量
<Col>{faqContent}</Col>

方式二：用三元表达式直接写在JSX里 #

如果逻辑简单，也可以把条件判断压缩成表达式直接放进花括号：

<Col>
  {language === 'en' 
    ? Api.getFaqText().map(b => 
        b.id === 1 ? (
          <BHead 
            textClass={b.classname} 
            key={b.id} 
            title={<div dangerouslySetInnerHTML={{__html: b.title}} />} 
          />
        ) : null
      )
    : null}
</Col>

注意：map遍历的每一项都要有明确返回值，所以b.id !==1时要返回null，不然React会报「每个子元素要有key」之外的警告。

2. 根据language动态选择模块函数 #

如果你的需求是不同语言对应不同的外部API函数（比如英文用Api.getFaqText，中文用Api.getZhFaqText），用对象映射表是最优雅的方案，比一堆if-else简洁太多：

// 第一步：定义语言到API函数的映射表
const langToApi = {
  en: Api.getFaqText,
  zh: Api.getZhFaqText, // 假设中文对应的函数是这个
  ja: Api.getJaFaqText  // 新增语言只需要在这里加键值对
};

// 第二步：根据当前language获取对应的函数，没有匹配项就用英文函数做兜底
const targetApiFunc = langToApi[language] || Api.getFaqText;

// 第三步：用选中的函数处理渲染逻辑
const faqContent = targetApiFunc().map(b => {
  return b.id === 1 ? (
    <BHead 
      textClass={b.classname} 
      key={b.id} 
      title={<div dangerouslySetInnerHTML={{__html: b.title}} />} 
    />
  ) : null;
});

// 最后渲染到JSX
<Col>{faqContent}</Col>

额外提醒：如果Api.getFaqText()是异步函数（返回Promise），那你不能直接在渲染时调用，得用useEffect配合组件状态来处理数据，不然会导致无限循环或者渲染错误。

内容的提问来源于stack exchange，提问作者user3576148