React组件Thumbnail、LikeButton无法使用，出现未定义错误求助

错误原因分析 #

你遇到的两个报错：

• 'Thumbnail' is not defined：React中使用自定义组件必须先导入，官网示例默认你已创建并导入该组件，省略了导入步骤。
• 'LikeButtoon' is not defined：组件名称拼写错误，正确名称应为LikeButton。
• 额外提醒：你的组件参数写法有误，(video)应该改为({ video })，因为函数组件的参数是props对象，需解构才能直接获取video属性。

修复步骤 #

1. 修正组件名称拼写 #

把代码中的<LikeButtoon/>改为<LikeButton/>。

2. 导入自定义组件 #

在ReactVideo.jsx文件顶部添加导入语句，假设Thumbnail和LikeButton组件与当前文件在同一目录下：

import Thumbnail from './Thumbnail';
import LikeButton from './LikeButton';

3. 创建缺失的组件文件 #

如果还没创建这两个组件，分别新建以下文件：

Thumbnail.jsx

const Thumbnail = ({ video }) => {
  return <img src={video.thumbnailUrl} alt={video.title} />;
};

export default Thumbnail;

LikeButton.jsx

const LikeButton = ({ video }) => {
  return <button>👍 {video.likes}</button>;
};

export default LikeButton;

4. 修正组件参数写法 #

将const ReactVideo = (video) => {改为const ReactVideo = ({ video }) => {，确保能正确获取传入的video数据。

修复后的完整代码 #

import Thumbnail from './Thumbnail';
import LikeButton from './LikeButton';

const ReactVideo = ({ video }) => {
  return (
    <div>
        <Thumbnail video={video}/>
        <a href={video.url}>
         <h3>{video.title}</h3>
         <p>{video.description}</p>
        </a>
        <LikeButton video={video}/>
    </div>
  )
}

export default ReactVideo

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