如何将React应用中的If/Else语句转换为非条件判断写法

开发者阿泽

2026-8-17

用配置映射重构React条件渲染（替代If/Else）

你的代码里大量重复了组件结构，只有最后一行属性展示不同。可以通过提取公共逻辑+配置映射的方式彻底去掉if/else，代码更简洁且易扩展：

步骤1：定义属性展示配置

先把不同属性对应的展示规则统一存到一个配置对象里，后续新增属性直接加配置就行：

const productPropertyConfig = [
  {
    key: 'kg',
    label: 'Weight',
    render: (val) => `${val.kg} KG`
  },
  {
    key: 'mb',
    label: 'Size',
    render: (val) => `${val.mb} MB`
  },
  {
    key: 'length',
    label: 'Dimensions',
    render: (val) => `${val.length}x${val.width}x${val.height}`
  }
];

步骤2：重构渲染逻辑

提取所有重复的组件结构，只动态渲染不同的属性部分：

{data.map((val, key) => {
  // 找到当前产品匹配的属性配置
  const matchedConfig = productPropertyConfig.find(config => val[config.key]);

  return (
    <div className="cardproductlist" key={key}>
      <div className="valuescontainercheckbox pt-4 ml-3">
        <input
          className="delete-checkbox"
          type="checkbox"
          value={val.sku}
          id={val.sku}
          onChange={handleCheck}
        />
      </div>
      <div className="valuescontainer">
        <span> {val.name}</span>
      </div>
      <div className="valuescontainer">
        <span> {val.price}$</span>
      </div>
      <div className={`valuescontainer ${!matchedConfig ? 'pb-5' : ''}`}>
        <span>{val.sku}</span>
      </div>
      {/* 动态渲染匹配的属性内容 */}
      {matchedConfig && (
        <div className="valuescontainer">
          <span className="pb-5">
            <span>{matchedConfig.label}: {matchedConfig.render(val)}</span>
          </span>
        </div>
      )}
    </div>
  );
})}