将CodePen嵌入到React框架站点中

Question

我一直在构建一个基本的React，今天我认为把一个页面放在一起展示我所做的一个#30天的代码库项目会很有趣(第二天的挑战是在我的网站上加载“一天一天的挑战”)。

下面是该页的代码：

import React, {Component} from 'react'

class Coding extends Component {
    render() {
        return (
            <div>
                <p
                    class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="isaac-tait" data-slug-hash="BaywrNQ" 
                    style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" 
                    data-pen-title="Ying Yang">
                    <span>
                        See the Pen <a href="https://codepen.io/isaac-tait/pen/BaywrNQ">Ying Yang</a> by Isaac Tait (<a href="https://codepen.io/isaac-tait">@isaac-tait</a>) on <a href="https://codepen.io">CodePen</a>.
                    </span>
                </p>
                    <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
            </div>
        )
    }
}

export default Coding

基本上一个样板，代码，HTML，嵌入，复制和粘贴。但是，我遇到的问题是页面正在显示，而Codepen却没有出现。这里是一个链接到正在讨论的页面(FYI -它现在还处于起步阶段)。

任何帮助或指示都将不胜感激。干杯!

Answer 1

我发现有两件事帮助我解决了这个问题。

1)我已经定义了我的新组件(我在上面展示我的CodePens的页面)，但是我没有在NavBar组件中使用它。我在运行npm start时发现了错误

2)我正在阅读这教程，当我将Codepen转换为jsx时，我看到了VS代码插件html到JSX，它出现在我的浏览器窗口中，在我现在的功能组件中。

故事的寓意:永远测试你的环境。