如何在React的map函数中实现条件渲染？附代码场景

看起来你现在的代码里，findAndRenderName函数的逻辑有点问题——用map去遍历projectList并赋值projectId，最后只会得到最后一个项目的ID，并不是真正的"查找匹配项"逻辑。我来给你梳理几种在map里实现条件判断的实用方法：

方法1：在单独函数内加入条件判断并返回渲染内容 #

先修正查找逻辑，用find替代map找到匹配的项目，再通过条件判断决定渲染内容：

const findAndRenderName = (projectId: number | undefined) => {
  // 找到与传入ID匹配的项目
  const matchedProject = projectList?.find(project => project.id === projectId);
  
  // 条件满足时返回要渲染的元素，否则返回null（React会忽略null）
  if (matchedProject) {
    return (
      <div key={matchedProject.id}>
        {/* 替换成你实际要渲染的内容，比如项目名称 */}
        {matchedProject.name}
      </div>
    );
  }
  return null;
};

return ( 
  <DetailsBox title={t('catalogPage.componentDetails.specs.used')}>
    { component?.projects.map(project => (
      <React.Fragment key={project.id}>
        {findAndRenderName(project.id)}
      </React.Fragment>
    )) } 
  </DetailsBox> 
);

方法2：直接在map回调内嵌入条件判断 #

如果逻辑不复杂，直接把判断写在map里会更直观，省去单独函数的开销：

return ( 
  <DetailsBox title={t('catalogPage.componentDetails.specs.used')}>
    { component?.projects.map(project => {
      const matchedProject = projectList?.find(p => p.id === project.id);
      
      // 条件判断：找到匹配项才渲染内容
      if (matchedProject) {
        return (
          <div key={project.id}>
            {matchedProject.name}
          </div>
        );
      }
      // 不满足条件时返回null，不渲染任何内容
      return null;
    }) } 
  </DetailsBox> 
);

方法3：用短路求值简化写法 #

利用JavaScript的&&短路逻辑，当左侧条件为真时才渲染右侧元素，代码更简洁：

return ( 
  <DetailsBox title={t('catalogPage.componentDetails.specs.used')}>
    { component?.projects.map(project => {
      const matchedProject = projectList?.find(p => p.id === project.id);
      // 只有matchedProject存在时，才会渲染后面的div
      return matchedProject && (
        <div key={project.id}>
          {matchedProject.name}
        </div>
      );
    }) } 
  </DetailsBox> 
);

额外优化：先过滤再渲染 #

如果不需要保留不满足条件的项，可以先过滤数组再map，减少不必要的null返回：

return ( 
  <DetailsBox title={t('catalogPage.componentDetails.specs.used')}>
    { component?.projects
        // 先过滤出在projectList中存在的项目
        .filter(project => projectList?.some(p => p.id === project.id))
        .map(project => {
          const matchedProject = projectList?.find(p => p.id === project.id);
          return (
            <div key={project.id}>
              {matchedProject?.name}
            </div>
          );
        }) } 
  </DetailsBox> 
);

注意点 #

• 用find替代map做匹配查找：find找到第一个匹配项就会停止遍历，比map更高效；
• 渲染列表时必须加key属性：帮助React识别列表元素的变化，提升渲染性能；
• 不满足条件时返回null或者空片段：React会自动忽略这些不渲染的元素。

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