将react库导入Codepen（即prop-types）

Question

codepen 上有一个很好的简单的 React ES6 示例。

https://codepen.io/anon/pen/ZxXQxp/

我想用它作为我想在反应类型检查中进行的一些调查的基础，即“defaultProps”功能。

“DefaultProperies”是一个非常简单的类型检查功能，但不幸的是它现在位于另一个库中。在我的组件顶部，我必须像这样导入它：

import PropTypes from 'prop-types';

我需要在 codepen 中执行哪些步骤来导入外部 React 库？似乎没有可能导入最基本的 React 库。

Answer 1

您需要在 Pen 中包含

prop-types

库。这样做：

1. 单击笔右上角的设置按钮：  
2. 选择“JavaScript”选项卡
3. 将预处理器设置为“Babel”
4. 将

   react

   、

   react-dom

   和

   prop-types

   添加到外部资源
   1. 反应：https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js
   2. react-dom：https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js
   3. prop-types：https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js

设置窗口应如下所示：

          

然后，在您的 JavaScript 中，您可以访问

PropTypes

:

const DumbButton = ({ name, label, onClick }) => (
  <button name={name} onClick={onClick}>{label}</button>
)

DumbButton.propTypes = {
  label: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
}

请参阅此 CodePen 了解工作示例。

Answer 2

2024 年更新：

@sbolel 分享的解决方案仍然有效，但现在有一种额外的方法。

CodePen 现在支持

import

。执行 @sbolel 显示的所有操作，除了使用“添加包”而不是“外部资源”，它允许您按 npm 名称搜索包。选择包将在代码顶部插入行：

import ReactDOM from "https://esm.sh/react-dom";
import React from "https://esm.sh/react";
import PropTypes from "https://esm.sh/prop-types";

工作示例的

CodePen。