如何将 Iframe 从 JSON URL 渲染到 React 组件答案

【问题标题】：How to render Iframe from JSON URL to React Component如何将 Iframe 从 JSON URL 渲染到 React 组件
【发布时间】：2018-05-31 14:05:02
【问题描述】：

我正在尝试从 JSON 文件渲染 YouTube Iframe 并渲染到子组件中。我有一个父组件，它正在从这个 JSON 文件加载卡片数据。点击这个卡片文件，我正在渲染卡片数据 JSON 值，它也有视频 url。当我点击卡片时，我将卡片数据打开到新选项卡中，然后我只获得 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>

    );
}

【问题讨论】：

标签： javascript json reactjs youtube-iframe-api

【解决方案1】：

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

【讨论】：