将反应库导入Codepen（即prop-types）

Question

在codepen上有一个很好的简单反应ES6示例。

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

我想将此作为我想在反应类型检查中进行的一些调查的基础，即＆＃39; defaultProps＆＃39;特征

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

import PropTypes from 'prop-types';

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

Answer 1

You need to include the prop-types library in the Pen.

1. click the settings button at the top right of the pen
2. select the "JavaScript" tab
3. set the preprocessor to "Babel"
4. add react, react-dom, and prop-types to External Resources
   1. react: 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

This is what the settings window should look like:

Then, in your javascript, you may access 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,
}

See this CodePen for a working example.