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

Question

我正在选修HTML/CSS/JS课程。有一些练习可以和机器人朋友一起创建网络应用程序。应该有很多机器人朋友的照片，但我只得到同样的回报。你能检查一下我是不是做错了什么吗？字符串内的括号不起作用：

https://robohash.org/${id}?200x200"} />

就像MyFriends

就像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

模板文字与backticks一起使用，在您的示例中，您应该将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"} />

​