将CodePen嵌入到React框架站点中

Question

[我一直在构建一个基本的React网络应用程序，今天我认为整理一个页面来展示我已经执行的＃30daycodechallenge项目会很有趣（两天的挑战是让我挑战一天的挑战并加载到我的网站上。） >

这里是该页面的代码：

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
基本上是样板Codepen HTML嵌入复制和粘贴。但是，我遇到的问题是页面正在显示，但Codepen没有显示。 Here是指向相关页面的链接（仅供参考-目前尚处于起步阶段）。

任何帮助或指针，将不胜感激。干杯！

[我一直在构建一个基本的React Webapp，今天我觉得把一个页面放在一起展示我所进行的＃30daycodechallenge项目会很有趣（两天的挑战就是获得一天的挑战...

Answer 1

[我发现有两点有助于解决我遇到的问题。