React中通过动态子串名访问变量——替代eval()的安全方案？

我有多个结构基本一致的元素，正尝试重构以简化代码，它们的核心区别仅在于引用格式相似的不同变量。例如：

(!editingTelephone && telephone === '') && 'No landline number added'

和

(!editingMobile && mobile === '') && 'No mobile number added'

我希望能将telephone或mobile这类字符串传入函数，由函数完成组件的整体构建并填充所有相关变量名与内容。

目前的难题是如何正确地动态构造变量名……
我知道可以使用eval()通过字符串构造变量名，但从安全角度考虑不推荐使用该方法。我想了解是否有更安全的替代方案，或是在React的该场景下使用eval()是否可行？

完全没必要用eval()，有两种更安全且符合React开发习惯的方案：

1. 用对象统一管理状态变量 #

把同类的状态变量打包到一个对象中，通过属性名动态访问，这是最常用的安全方案。
比如先在组件里定义状态对象：

const [formState, setFormState] = useState({
  telephone: '',
  mobile: '',
  editingTelephone: false,
  editingMobile: false
});

然后编写通用的提示信息生成函数：

const getEmptyFieldMessage = (fieldName) => {
  // 拼接对应的编辑状态属性名（首字母大写）
  const editingKey = `editing${fieldName.charAt(0).toUpperCase() + fieldName.slice(1)}`;
  const isEditing = formState[editingKey];
  const fieldValue = formState[fieldName];
  
  // 根据字段名返回对应提示文案
  const message = fieldName === 'telephone' 
    ? 'No landline number added' 
    : 'No mobile number added';
  
  return (!isEditing && fieldValue === '') && message;
};

调用时直接传入字段名字符串即可：

getEmptyFieldMessage('telephone');
getEmptyFieldMessage('mobile');

2. 传递配置对象（更灵活） #

如果每个字段的提示文案、状态对应关系有差异，可以直接传递包含所有必要信息的配置对象，完全避免拼接变量名的操作：

const getEmptyFieldMessage = ({ isEditing, fieldValue, emptyMessage }) => {
  return (!isEditing && fieldValue === '') && emptyMessage;
};

调用时传入对应变量和文案：

getEmptyFieldMessage({
  isEditing: editingTelephone,
  fieldValue: telephone,
  emptyMessage: 'No landline number added'
});

getEmptyFieldMessage({
  isEditing: editingMobile,
  fieldValue: mobile,
  emptyMessage: 'No mobile number added'
});

关于React中使用eval()的问题 #

即便在React场景下也绝对不推荐使用eval()，原因如下：

• 存在代码注入风险：哪怕当前场景没有外部输入，后续维护时若不小心引入用户可控内容，会直接埋下安全隐患
• 代码可读性差：动态执行的逻辑难以追踪，后续维护者理解成本极高
• 影响性能：JS引擎无法对eval()内的代码做优化，会降低代码运行效率

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