如何将本地视频文件作为道具传递给ReactPlayer

Question

我使用的是react播放器组件。

我有一个文件1，我将一些数据存储为一个数组，包括一个本地视频。

import videoSample from "../assets/videos/sample-video.mov";
export const Data = {
ProjectList: [
{
title: "My title",
desc: "Some description",
videoUrl: { videoSample },
sourceUrl: "https:// ... ",
},
],
};

文件2获取数组，并将每个项映射到名为ProjectDetail的React组件。

function MappingFunction() {
return (
<>
{Data.ProjectList.map((project, index) => (
<ProjectDetail key={index} {...project} />
))}
</>
);
}

最后，这是包含ProjectDetail的文件3。它将数组项目作为道具。CCD_ 3被传递给ReactPlayer组件。

export default function ProjectDetail(props) {
return (
<>
<div>
<ReactPlayer 
url={props.videoUrl}  // does not work!
width="500px"
/>
</div>
<div>
<h2>{props.title}</h2>  // works
<p>{props.desc}</p>     // works
<button 
onClick={() => { window.open(props.sourceUrl, "_blank"); }}  // works
> Click to see more
</button>
</div>
</>
);
}

title、desc和sourceUrl工作良好，但我不明白videoUrl不工作。我试着查找答案，但没有成功。

如果我直接在文件3中导入videoSample，它可以正常工作，但当从外部作为道具传递时就不行了。我错过了什么？

Answer 1

发现我的错误。我所需要做的就是去掉花括号。

videoUrl: { videoSample }->videoUrl: videoSample