JavaScript中如何在prop属性内拼接字符串与变量

问题原因 #

• React 组件的动态属性值必须用{}包裹，直接写在属性的双引号内的内容会被识别为静态字符串，不会解析为 JS 表达式
• 你混淆了普通字符串拼接和模板字符串的语法：${变量}是模板字符串专属语法，必须用反引号`包裹才能生效，你当前用双引号包裹自然无法识别，混写的+也不符合语法规范，因此抛出identifier expected报错

解决方案 #

有两种正确写法可以实现需求：

1. 模板字符串写法（更推荐，可读性更高）

<TextField
  label="First Name"
  defaultValue={`My name is ${name}`}
/>

2. 普通字符串拼接写法

<TextField
  label="First Name"
  defaultValue={"My name is" + name}
/>

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