是否可以从cdn在浏览器中使用react-select

Question

是否可以直接从浏览器中使用react select如今的捆扎工？

我发现能够做到这一点的最新版本是2.1.2：如何使用React和Babel从React Select CDN导入？

当时他们曾经以umd格式提供react-select.min.js。

现在他们有react-select.browser.esm.js和react-select.browser.cjs.js(https://unpkg.com/browse/react-select@3.1.0/dist/(，但我无法从浏览器中获得任何这些功能。

Answer 1

我想明白了。希望这能帮助其他人。永远不要放弃。

react-selectv3(目前为v3.1.1(不再有独立的lib，所以使用它的唯一方法是通过v2。

要使用v2，您需要首先包含所有依赖项。

<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.12.7/babel.min.js"></script>
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<script src="https://unpkg.com/classnames@2.2.6/index.js"></script>
<script src="https://unpkg.com/react-input-autosize@2.2.2/dist/react-input-autosize.js"></script>
<script src="https://unpkg.com/emotion@10.0.27/dist/emotion.umd.min.js"></script><script src="https://unpkg.com/react-select@2.4.4/dist/react-select.js"></script>
<script type="text/babel">
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
];
class Hello extends React.Component {
render() {
return <Select options={options} />;
}
}
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
</script>

Answer 2

从v3(及更高版本(开始，他们已经弃用UMD构建，因此您必须将ESM构建与<script data-type="module">一起使用。请参阅此处了解更多信息：https://github.com/JedWatson/react-select/issues/4120#issuecomment-739138229和这里的一个例子。