React中能否将字符串转为引用变量名以简化表单代码？

现有代码情况 #

定义的引用变量（注：原代码存在笔误，已修正） #

const heightInputRef = useRef();
const weightInputRef = useRef();

输入配置数组 #

const inputs = [{
    ref: heightInputRef,
    type:'number',
    placeholder: 'Height',
    name: 'height'
  },
  {
    ref: weightInputRef,
    type:'number',
    placeholder: 'Weight',
    name: 'weight'
  }]

组件渲染逻辑 #

{inputs.map((item, index) => <Input
  name={inputs[index].name}
  placeholder={inputs[index].placeholder}
  type={inputs[index].type}
  inputRef={inputs[index].ref}
/>
)}

Input组件代码 #

export default function Input(props) {
  return (
    <input
      className={classes.input} 
      placeholder={props.placeholder} 
      type={props.type} 
      ref={props.inputRef}
      name={props.name}
    />
  )
}

需求 #

能不能不用在inputs数组里手动指定ref字段，而是通过类似item.name+"InputRef"的变量名拼接方式自动关联对应的ref，减少重复代码？

可行实现方案 #

直接通过字符串拼接拿不到局部变量的ref，但可以把所有ref统一放到一个对象里，利用name作为键名来匹配，具体步骤如下：

1. 将ref统一存入对象
   把原来分散的ref变量整合到一个对象中，键名和inputs里的name对应：

const inputRefs = {
  height: useRef(),
  weight: useRef()
};

2. 简化inputs数组
   去掉每个项里的ref字段，只保留必要配置：

const inputs = [{
    type:'number',
    placeholder: 'Height',
    name: 'height'
  },
  {
    type:'number',
    placeholder: 'Weight',
    name: 'weight'
  }]

3. 渲染时动态匹配ref
   在map循环里直接通过item.name从inputRefs对象中取对应的ref，同时优化原渲染逻辑里的inputs[index]写法，直接用循环项item：

{inputs.map(item => <Input
  name={item.name}
  placeholder={item.placeholder}
  type={item.type}
  inputRef={inputRefs[item.name]}
/>
)}

这样就实现了通过name自动关联ref的需求，不用再重复编写ref关联代码，达到了简化的目的。

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