ReactJS中如何动态访问对象属性以避免大量if/else条件渲染？

你需要的功能可以直接通过 JavaScript 原生的方括号属性访问语法实现，完全不需要编写大量 if/else 或 switch 分支。

在 JavaScript 中访问对象属性有两种形式：点语法（data.固定属性名）仅支持访问名称固定的属性，方括号语法（data[动态变量]）可以传入变量作为属性名，正好匹配你需要根据选中的value动态取属性的场景。

基础实现方案 #

你示例中的代码只需要把data.<value>改为data[value]，同时加上必要的安全校验避免报错即可：

{
  // 先校验value存在、data存在对应属性、且属性值为数组再执行map
  value && data[value] && Array.isArray(data[value])
    ? data[value].map((item, index) => {
        return (
          <option 
            key={index}
            value={item.displayName}
          >
            {item.displayName}
          </option>
        )
      })
    // 没有匹配值时可以返回空，或者自定义默认提示选项
    : <option value="">请先选择上级选项</option>
}

简化写法（ES2020+环境支持） #

如果你的项目支持 ES2020 以上的语法规范，可以用可选链+空值合并运算符简化判断逻辑：

{
  data?.[value]?.map((item, index) => (
    <option key={index} value={item.displayName}>
      {item.displayName}
    </option>
  )) ?? <option value="">请先选择上级选项</option>
}

额外优化建议 #

如果担心用户传入的value是不在data属性范围内的非法值，可以提前定义合法属性白名单做校验：

// 替换为你实际data对象的所有合法属性名
const VALID_DATA_KEYS = ['category', 'product', 'region']

渲染时增加白名单判断即可：

{
  value && VALID_DATA_KEYS.includes(value) && data[value]?.map(/* 渲染逻辑 */)
}

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