如何将数据正确传递到 React / NextJS Video 组件？

Question

我有一个基于 React 的视频播放器，设置如下：

<ReactPlayer playing={true} controls={true} muted={true} loop={true} width="100" height="100" url='videos/330163_SF.mp4' poster="images/330163_C2B_Clean.png"></ReactPlayer>

此 static URL 将替换为来自数据表的动态 URL：

const { videoID, videolink, id, thumb } = videoData

当放入像这样的简单文本括号时： {videolink} ，视频链接被拉出并正确显示在页面上：

videos/general/100004_SF.mp4

但是，以这种方式将数据插入并传递给视频组件是行不通的

 <ReactPlayer playing={true} controls={true} muted={true} loop={true} width="100" height="100" url={'videolink'} poster="images/330163_C2B_Clean.png"> </ReactPlayer>

我的错误在哪里？

Answer 1

当您将字符串括在引号中时，您将字符串作为道具而不是变量传递

<ReactPlayer url={'videolink'} //This will always pass a string 
<ReactPlayer url={'videos/general/100004_SF.mp4'} //This would work for example
<ReactPlayer url={videolink} //This is the correct solution as eit t is now passing the variable.