React组件按description字段渲染内容异常，求高效实现方案

我有以下房产JSON数据：

{"location":"2034","type":"Residential","price":400000,"address":"123 Fake Street","suburb":"Maroubra","historical_DAs":0,"description":"Residential","property_ID":1},
{"location":"2036","type":"Commercial","price":475000,"address":"123 Fake Street","suburb":"Coogee","historical_DAs":10,"description":"Government","property_ID":2},
{"location":"2035","type":"Food & Bev","price":56000,"address":"123 Fake Street","suburb":"Clovelly","historical_DAs":3,"description":"Residential","property_ID":3},
{"location":"2031","type":"Education","price":69070,"address":"123 Fake Street","suburb":"Randwick","historical_DAs":7,"description":"Government","property_ID":4},
{"location":"2036","type":"Education","price":69070,"address":"123 Fake Street","suburb":"Randwick","historical_DAs":7,"description":"Government","property_ID":5}

我想根据description字段渲染不同内容（当前用文本测试），写了下面的React组件，但所有内容都渲染成“Image 2”，实际应该有部分显示“Image 1”，求高效解决方法：

function TypeImages({ description }) { 
  
  function Residential(props) {
    return <div>
       <h1>Image 1</h1>
     </div>;
  }

  function Government(props) {
    return <div>
       <h1>Image 2 </h1>
     </div>;
  }

  function TypeImage(props) {
    if (description === 'Residential') {
      return <Residential />;
    } else
  return <Commercial />;
  }


  return (
    <div>
      <div>
        <div className="hidden lg:inline-flex mb-1 px-9">
          <TypeImage/>      
          <div>
            
          </div>  
        </div>
      </div>
    </div>
  );
}

export default TypeImages;

1. 未定义Commercial组件：代码else分支返回的<Commercial/>从未声明，运行时会触发错误；同时逻辑只判断了Residential，忽略了Government的匹配，导致非Residential的场景全部走错误分支。
2. 嵌套组件冗余：在组件内部嵌套定义子组件，增加了代码复杂度，不利于维护。

推荐使用组件映射表的方式，代码简洁易扩展，新增类型时只需补充映射表条目即可：

// 单独定义各类型对应的组件
const Residential = () => <div><h1>Image 1</h1></div>;
const Government = () => <div><h1>Image 2</h1></div>;
// 定义默认组件，处理未匹配到的description类型
const DefaultImage = () => <div><h1>Default Image</h1></div>;

// 组件映射表：key为description的值，value为对应渲染的组件
const DESCRIPTION_COMPONENTS = {
  Residential,
  Government
  // 后续新增类型，直接在这里添加即可
};

function TypeImages({ description }) {
  // 根据description获取对应组件，无匹配则用默认组件
  const TargetComponent = DESCRIPTION_COMPONENTS[description] || DefaultImage;

  return (
    <div>
      <div className="hidden lg:inline-flex mb-1 px-9">
        <TargetComponent />
      </div>
    </div>
  );
}

export default TypeImages;

方案优势 #

• 扩展性强：新增description类型时，只需定义新组件并加入映射表，无需修改核心逻辑。
• 可读性高：避免多层if-else/switch的冗余写法，逻辑一目了然。
• 容错性好：默认组件处理未匹配的场景，避免渲染异常。

如果要基于原代码修改，需补全组件定义并完善判断逻辑：

function TypeImages({ description }) { 
  const Residential = () => <div><h1>Image 1</h1></div>;
  const Government = () => <div><h1>Image 2</h1></div>;
  const Commercial = () => <div><h1>Commercial Image</h1></div>; // 补全组件定义

  function TypeImage() {
    if (description === 'Residential') {
      return <Residential />;
    } else if (description === 'Government') { // 增加Government的判断分支
      return <Government />;
    } else {
      return <Commercial />;
    }
  }

  return (
    <div>
      <div className="hidden lg:inline-flex mb-1 px-9">
        <TypeImage/>      
      </div>
    </div>
  );
}

export default TypeImages;

注：该方案扩展性较差，不推荐长期使用。

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