如何用React和TypeScript优化表格单元格图标与文本的渲染代码

核心思路 #

把重复的渲染逻辑抽离为独立的判断函数或配置映射，让视图渲染部分只负责展示逻辑，实现逻辑与视图分离，消除冗余代码。

具体实现 #

假设你已经有对应图标组件：BlueTriangleIcon（蓝色三角）、OrangeOvalIcon（橙色椭圆）、GrayRectangleIcon（灰色矩形），以下是优化后的代码：

1. 定义类型与文本映射（可选但推荐） #

给output定义联合类型，让TypeScript提供类型校验；同时把文本内容抽成映射表，避免硬编码：

// 限定output的合法取值，避免传参错误
type OutputType = 'text1' | 'text2' | 'not-applicable';

// 文本内容映射表，统一管理展示文本
const TEXT_MAP: Record<OutputType, string> = {
  'text1': '文本1',
  'text2': '文本2',
  'not-applicable': '不适用'
};

2. 抽离图标判断逻辑 #

把所有条件判断集中到一个函数里，返回对应图标组件：

import React from 'react';
// 导入你的图标组件
import BlueTriangleIcon from './icons/BlueTriangleIcon';
import OrangeOvalIcon from './icons/OrangeOvalIcon';
import GrayRectangleIcon from './icons/GrayRectangleIcon';

const getCellIcon = (output: OutputType, isAvailable: boolean): React.ReactNode | null => {
  switch (output) {
    case 'text1':
      return isAvailable ? <BlueTriangleIcon /> : <OrangeOvalIcon />;
    case 'not-applicable':
      return <GrayRectangleIcon />;
    case 'text2':
    default:
      return null; // text2场景不渲染图标
  }
};

3. 简洁的单元格组件 #

视图部分只负责渲染图标和文本，无需重复写条件判断：

type TableCellProps = {
  output: OutputType;
  isAvailable: boolean;
};

export const TableCell = ({ output, isAvailable }: TableCellProps) => {
  const icon = getCellIcon(output, isAvailable);
  const text = TEXT_MAP[output];

  return (
    <div className="table-cell">
      {/* 仅当图标存在时渲染 */}
      {icon && <span className="cell-icon">{icon}</span>}
      <span className="cell-text">{text}</span>
    </div>
  );
};

扩展优化（可选） #

如果后续需要新增更多output类型，也可以用配置对象映射的方式，让规则更直观、易维护：

const ICON_CONFIG_MAP: Record<OutputType, (isAvailable: boolean) => React.ReactNode | null> = {
  'text1': (available) => available ? <BlueTriangleIcon /> : <OrangeOvalIcon />,
  'text2': () => null,
  'not-applicable': () => <GrayRectangleIcon />
};

// 调用时直接通过配置获取图标
const getCellIcon = (output: OutputType, isAvailable: boolean) => {
  return ICON_CONFIG_MAP[output](isAvailable);
};

优化优势 #

• 职责单一：逻辑判断与视图渲染分离，代码结构清晰
• 减少冗余：避免在渲染部分重复编写if-else或相同的图标+文本结构
• 易维护：新增或修改展示规则时，只需修改判断函数或配置映射，无需改动视图代码

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