如何将 Iframe 从 JSON URL 渲染到 React Component

Question

我正在尝试从 JSON 文件呈现 YouTube Iframe 并呈现到子组件中。我有一个父组件正在从这个 JSON file.On 加载卡片数据单击这个卡片文件我正在渲染卡片数据 JSON 值，它也有视频 url.When 我单击卡片我将卡片数据打开到新选项卡中，但我只得到 Iframe 框，而不是像普通 YouTube 那样的视频预览。如何修复它？

P.S 我的项目是 React .Net Core。

CardData.tsx

const CardData = {
  "cards": [
    {
      "projectID": "00001",
      "projectName": "One tent system",
      "profileProjectImage": "https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/72644/project_thumb_large_capinha.jpg",
      "projectBy": "Crua Outdoors",
      "projectDescrition": "Lightweight Hiking Tent + Insulated Cocoon + Air-Framed Living Space: Use individually or together for the ultimate outdoors experience",
      "projectLocation": " New York, NY",
          "videoUrl": "https://www.youtube.com/embed/hHMqkmIvOFw"

    },
    {
      "projectID": "00002",
      "projectName": "Two tent system",
      "profileProjectImage": "https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/72644/project_thumb_large_capinha.jpg",
      "projectBy": "Crua Outdoors",
      "projectDescrition": "Lightweight Hiking Tent + Insulated Cocoon + Air-Framed Living Space: Use individually or together for the ultimate outdoors experience",
        "projectLocation": " New York, NY",
        "videoUrl": "hiii"
    },
    {
      "projectID": "00003",
      "projectName": "Three tent system",
      "profileProjectImage": "https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/72644/project_thumb_large_capinha.jpg",
      "projectBy": "Crua Outdoors",
      "projectDescrition": "Lightweight Hiking Tent + Insulated Cocoon + Air-Framed Living Space: Use individually or together for the ultimate outdoors experience",
        "projectLocation": " New York, NY",
        "videoUrl": "hiii"
    }
  ]
}
export default CardData;

ProjectDetailPage.tsx

import * as React from 'react';
import App from '../HomePopularCards/ProjectCardContainer';
import CardData from '../HomePopularCards/CardData';
export default function ProjectDetailPage(props) {
    const projectID = props.match.params.projectID;
    const project = CardData.cards.find(card => card.projectID === projectID);

    return (
        <div>
        <div className="container-fluid">
            <div className="row">
                <div className="col-md-12">
                    <h2 className="text-center">{project.projectName}</h2>
                </div>
            </div>  
        </div>      

        <div className="container-fluid">
            <div className="row">
                   <div className="col-md-6">
                        <iframe width="560" height="315" src={project.videoUrl} ></iframe>
                    </div>
                    <div className="col-md-6">
                        {project.projectBy}
                        {project.projectDescrition}
                        {project.projectLocation}

                </div> 
            </div>
        </div>   
            </div>

    );
}

Answer 1

Iframe 未加载的主要原因是因为有两个文件，CardData.tsx 和 CardData.js存在于相同的 directory.Since webpack 编译中或优先于 CardData.js，我正在 CardData.js 中进行更改。我只是删除了我的 CardData.js 并且一切正常！

如何将 Iframe 从 JSON URL 渲染到 React Component

How to render Iframe from JSON URL to React Component

javascript

json

reactjs

youtube-iframe-api