React.js：如何通过模板字面量获取变量名对应的变量值？

嘿，我懂你想通过模板字面量实现动态取变量值的需求，但直接写{text_${props}}确实只会输出字符串而非变量的实际内容——因为模板字面量的核心作用是拼接字符串，没办法直接引用变量。不过有更安全优雅的方式达成你的目标，咱们慢慢说：

推荐方案：用对象映射键值对 #

最稳妥也最易维护的做法，是把你的文本内容放到一个对象里，用a和b作为键，这样就能直接通过props来访问对应的值了：

const Header = (props) => {
  // 把文本按key存入对象
  const textMap = {
    a: "Lorem ipsum dolor",
    b: "Lorem"
  };
  
  // 用props作为key取值，还能加默认值处理props无效的情况
  return (
    <h1>{textMap[props] || '默认显示文本'}</h1>
  );
}

不推荐的模板字面量+eval方式（仅作演示） #

如果你非要贴近模板字面量的思路，理论上可以用eval()执行拼接后的字符串，但强烈不建议这么做！eval会执行任意传入的代码，一旦props被注入恶意内容，会引发严重安全风险，而且代码可读性、调试难度都会飙升。示例代码仅作参考，千万别在生产环境用：

const Header = (props) => {
  const text_a = "Lorem ipsum dolor";
  const text_b = "Lorem";
  
  // 危险！仅作演示，实际开发禁止使用
  return (
    <h1>{eval(`text_${props}`)}</h1>
  );
}

总结 #

对象映射的方式不仅能实现你要的动态取值效果，还比模板字面量+eval的方案更安全、更清晰，建议优先采用这种写法。

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