在另一个组件中渲染个人资料图像 - React js

Question

我正在尝试学习如何在 react js 中使用道具来发表评论，但我似乎无法从 Comment 组件中的 ProfilePicture 组件渲染来制作默认的个人资料图像。 请帮助 (°Ω°)/，在此先感谢。

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

// user's comment
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>
      <ProfilePicture image={comment.pfpUrl}/>
    </div>
  )
}

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

Answer 1

你在这里传递一个名为image的道具：

<Comment image={comment.image} />

但是在<Comment>组件中的任何地方都没有使用该道具。 相反，您直接使用comment ：

<ProfilePicture image={comment.pfpUrl}/>

comment没有名为pfpUrl的属性。 如果要直接使用 object，请使用正确的属性：

<ProfilePicture image={comment.image.pfpUrl}/>

（当然，因为它未被使用，所以请移除道具。）

如果要使用道具，请使用道具：

<ProfilePicture image={props.image}/>

Answer 2

你只需要更加小心道具。 Typescript 将帮助您避免此类错误。

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

// user's comment
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 = ({image}) => {
  return (
    <div>
      <ProfilePicture image={image}/>
    </div>
  )
}

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