如何在React JSX的map函数中动态插入本地变量匹配传入props值

问题根源 #

你之前用模板字符串拼接得到的只是字符串值，并非指向你定义的数组变量的引用，所以无法调用数组的map方法。

本地实现方案 #

直接在子组件内声明一个键值对映射对象，用传入的props值作为key匹配对应的选项数组即可，无需修改父组件逻辑，也不需要透传全量选项：

// incoming props  string of A or  B or  C depending on what is getting seleted at parent element ! 

function OptionAcordingToProps(props) {
  // 本地定义选项映射表，后续新增类型直接加键值对即可
  const optionMap = {
    A: ['x', 'x', 'x'],
    B: ['y', 'y', 'y'],
    C: ['z', 'z', 'z']
  }
  // 用props取值，加空数组兜底避免非法入参报错
  const currentOptions = optionMap[props.options] || []
 
  return (
    <div>
      <form onSubmit={doSmth}>
        <NativeSelect>
             {currentOptions.map((option, index) => (
               // 示例用index做key，实际业务建议替换为选项对应的业务唯一值
            <option key={index}>{option}</option>
          ))}
        </NativeSelect>
        </form>    
       </div>
  );
}

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