React - 意外的模板字符串表达式：no-template-curly-in-string答案

【问题标题】：React - Unexpected template string expression: no-template-curly-in-stringReact - 意外的模板字符串表达式：no-template-curly-in-string
【发布时间】：2020-10-12 20:32:24
【问题描述】：

我正在尝试学习 React，并且正在学习视频课程。我输入的代码与屏幕上显示的完全相同。它在视频中有效，但不适用于我。

代码如下：

 <img alt='robot' src={'https://robohash.org/${props.id}?size=200x200'} />

它告诉我 src 是 '意外的模板字符串表达式：no-template-curly-in-string'

这里发生了什么？我正在使用 VSCode 作为我的编辑器。

【问题讨论】：

如果你想添加${props.id}，你应该使用`而不是'因为template literals。
模板字符串使用 ` ` 而不是普通的引号
啊，好的，谢谢！这在我正在完成的教程中没有解释，并且在他们的编辑器上，引号“字面意思”与他们的编辑器使用的字体看起来没有任何不同。成功了！

标签： javascript reactjs

【解决方案1】：

eslint 发现了你的错误。这是带有'的模板文字使用表达式。

错误，

 <img alt='robot' src={'https://robohash.org/${props.id}?size=200x200'} />

const props = {id: "someId"}
console.log('https://robohash.org/${props.id}?size=200x200')

试试，把'换成`，

 <img alt='robot' src={`https://robohash.org/${props.id}?size=200x200`} />

const props = {id: "someId"}
console.log(`https://robohash.org/${props.id}?size=200x200`);

【讨论】：

【解决方案2】：

您必须使用Template String 功能，back-quote 可以在字符串的开头和结尾使用该功能。

之前：

 <img alt='robot' src={'https://robohash.org/${props.id}?size=200x200'} />

之后：

 <img alt='robot' src={`https://robohash.org/${props.id}?size=200x200`} />

【讨论】：

【解决方案3】：

是的，所以你必须使用模板文字。

所以把这部分放在下面的反引号中，即 `

https://robohash.org/${props.id}?size=200x200

【讨论】：