React组件iframe中如何使用props改变URL

Question

我的网页只需要显示与所选主题相对应的视频。我需要将 url 作为道具传递给组件，但我无法让它工作。如果我对 url 进行硬编码，则 iframe 会呈现。如果我尝试将 url 作为道具传递，我会收到一个 "YouTube refused to connect" 错误，其中 iframe 中的 link 符号已损坏。这是我的组件。为了进行健全性检查，我检查以确保 url（在我的代码中称为 source）会打印到屏幕上，而且确实如此。

function VideoItem(props) {
  return (
    <div>
      <h3>{props.item}</h3>
      <h4>Name: {props.name}</h4>
      <h4>Subject: {props.subject}</h4>
      <p>Description: {props.description}</p>
      <p>source: {props.source}</p>
      <iframe 
        title={props.name}
        width="560" 
        height="315" 
        src={props.source}
        frameborder="0" 
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen="">
      </iframe>
      <hr />
    </div>
  );

在我的视频列表中，url 是这样列出的：

source: "https://youtu.be/restOfAddress"

我找不到 url 作为 prop 传入的任何其他问题。在地图 API 上有一个关于 urls 的帖子，但这并没有回答我的问题。谢谢

Answer 1

来源 here 建议设置 embed 而不是监视：

<iframe width="420" height="315" src="https://www.youtube.com/embed/rLMHGjoxJdQ"></iframe>

看看是否有帮助。

React组件iframe中如何使用props改变URL

How to use props to change URL in iframe of react component

javascript

url

reactjs

react-props

react-component