React开发RoboFriends时字符串内${}插值失效导致所有图片相同怎么办

JavaScript 中${}变量插值语法属于模板字符串专属特性，仅当字符串被反引号（）包裹时才会生效。你当前代码中使用双引号包裹src属性的字符串，${id}`会被识别为普通文本，不会被替换为实际的id变量值，导致所有机器人头像都请求同一个固定地址，所以展示效果完全一致。

将img标签src属性对应的字符串包裹符号从双引号改为反引号即可，修改后的完整代码如下：

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;

修改后每个卡片都会根据传入的id值请求对应的机器人头像，即可达到预期展示效果。

内容的提问来源于stack exchange，提问作者Michał Warakomski