Question

我正在尝试从JSON文件渲染YouTube Iframe并将其渲染为子组件。我有一个父组件，从这个JSON文件加载卡数据。点击此卡文件，我正在渲染卡数据JSON值，这也是有视频网址。当我点击卡我打开卡片数据到新标签和我只获取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 都出现在同一个目录中。因为webpack编译或优先到CardData.js，我正在 CardData.js 进行更改。我只是删除了 CardData.js ，一切正常！

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

1 个答案: