将 CodePen 嵌入 React 框架站点

Question

我一直在构建一个基本的 React web 应用程序，今天我认为将一个页面放在一起来展示我进行的#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 是指向相关页面的 link（仅供参考 - 它现在处于起步阶段）。

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

Answer 1

我发现两件事有助于解决我遇到的问题。

1) 我已经定义了我的新组件（我在其上展示我的 CodePens 的页面）但我没有在 NavBar 组件中使用它。我在运行 npm start

时发现错误

2) 我正在阅读 this 教程并在将 Codepen 嵌入转换为 JSX 时遇到了 VS Code 插件 html to jsx在我的浏览器中 window 我现在正在运行的组件中。

故事的寓意：始终测试您的环境 :D

将 CodePen 嵌入 React 框架站点

Embed a CodePen into a React framework site

reactjs

embed

codepen