为什么字符串中的美元符号和括号不起作用？ Javascript/npm/反应

Question

我正在学习 HTML/CSS/JS 课程。 有练习用机器人朋友创建网络应用程序。 应该有很多机器人朋友的照片，但我只得到了相同的回报。 你能检查一下我是否做错了什么吗？ 字符串内的括号不起作用：<img alt='robots' src={"https://robohash.org/${id}?200x200"} />

和我的朋友一样

应该是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"} />