React不渲染时间仅显示模板字符串源码的问题咨询

时间无法正常渲染、直接输出代码文本的核心原因是JavaScript模板字符串语法使用错误：

• 支持${}插值语法的模板字符串，必须使用反引号（`，键盘Esc键下方的按键符号）包裹，不能使用普通双引号、单引号
• 你当前用双引号包裹整段内容时，JS引擎会将其识别为普通文本字符串，不会执行${}内部的时间获取逻辑，最终直接把原始代码文本渲染到页面上。

将包裹时间内容的双引号替换为反引号即可，修正后可正常渲染当前小时和分钟：

<div className={classes.FeatureData}>
  <p>{`${new Date().getHours()}:${new Date().getMinutes()}`}</p>
</div>

可选替代写法：如果不想使用模板字符串，也可以直接拆分JSX表达式，渲染效果完全一致：

<div className={classes.FeatureData}>
  <p>{new Date().getHours()}:{new Date().getMinutes()}</p>
</div>

回看课程对应片段时重点留意符号细节，视频里的代码外层用的一定是反引号，只是录屏时符号辨识度低容易看错。所有需要在字符串内嵌入变量、执行表达式的场景，只要用到${}插值，外层必须配对使用反引号，不能替换为普通引号。

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