為什么字符串中的美元符號和括號不起作用？ 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"} />