为什么字符串内的美元符号和括号不工作?Javascript / npm /反应

Question

我正在学习HTML/CSS/JS课程。有一个与机器人朋友一起创建web应用程序的练习。应该有很多机器人朋友的照片，但我得到的回报却一样。你能检查一下我是否做错了什么吗?

朋友

应该如此RoboFriends

代码

import React from 'react';

const Card = (props) => {
const { email, name, id } = props;
return (

<div className="tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5">
<img alt='robots' src={"https://robohash.org/${id}?200x200"} />
<div>
<h2> {name} </h2>  
<p>{email}</p>  
</div>
</div>
);
}
export default Card;

enter code here

Answer 1

像这样使用反号:

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

Answer 2

模板字量与反引号一起使用，在您的示例中，您应该将img标记中的src替换为以下内容:src={`https://robohash.org/${id}?200x200`}.

Answer 3

双引号不支持${}。

使用:

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

或

<img alt='robots' src={"https://robohash.org/" + id + "?200x200"} />