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

Question

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

我想将其用作我想在 React 类型检查中进行的一些调查的基础，即 'defaultProps' 功能。

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

import PropTypes from 'prop-types';

我需要在 codepen 中执行哪些步骤才能导入外部反应库？似乎没有办法导入最基本的反应库。

Answer 1

您需要在 Pen 中包含 prop-types 库。为此：

点击笔右上角的设置按钮：
select“JavaScript”选项卡
将预处理器设置为“Babel”
将 react、react-dom 和 prop-types 添加到外部资源

设置 window 应该是这样的：

然后，在您的 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 以获取工作示例。

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

Importing react libraries into Codepen (namely prop-types)

reactjs

codepen