React JS：如何在Comment组件中渲染ProfilePicture组件的头像？

你代码里有两个关键问题导致头像渲染失败：

1. ProfilePicture组件的Props传递错误 #

ProfilePicture期望接收一个包含pfpUrl和name的image对象，但你在Comment组件里传给它的是comment.pfpUrl——这只是个字符串，并非对象。所以当组件试图访问props.image.pfpUrl时，会因为image是字符串而报错。

2. Comment组件未使用传入的Props #

你给Comment组件传了image={comment.image}，但组件内部没有使用这个props，反而直接引用全局的comment变量，既不符合组件复用性，也导致传递的props无效。

修正后的完整代码： #

const ProfilePicture = (props) => {
  return (
    <div>
      <img
        className="ProfilePicture"
        src={props.image.pfpUrl}
        alt={props.image.name}
        height={100}
        width={100}
      />
    </div>
  )
};

// 用户评论数据
const comment = {
  image: {
    name: "Default Profile Image",
    pfpUrl: 'https://static.vecteezy.com/system/resources/thumbnails/009/292/244/small/default-avatar-icon-of-social-media-user-vector.jpg'
  }
}

const Comment = (props) => {
  return (
    <div>
      {/* 传入从Comment组件接收到的完整image对象 */}
      <ProfilePicture image={props.image}/>
    </div>
  )
}

ReactDOM.render(
  <Comment image={comment.image} />,
  document.getElementById('root')
);

核心修改点： #

• 在Comment组件中，将<ProfilePicture image={comment.pfpUrl}/>改为<ProfilePicture image={props.image}/>，把父组件传入的完整image对象传给ProfilePicture。
• 确保ProfilePicture组件能正确读取props.image.pfpUrl和props.image.name，现在传入的是符合要求的对象结构。

这样修改后，默认头像就能正常渲染了。

内容的提问来源于stack exchange，提问作者cindicate