时间戳

首页 > 解决方案 > 是否可以在 cdn 的浏览器中使用 react-select？

javascript - 是否可以在 cdn 的浏览器中使用 react-select？

问题描述

现在可以在没有捆绑器的情况下直接从浏览器中使用 react-select 吗？

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

他们过去常常以react-select.min.jsumd 格式提供。

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

标签： javascriptreactjsreact-selectcommonjses6-modules

解决方案

我想通了。希望这可以帮助其他人。永不放弃。

react-select v3（此时为 v3.1.1）不再具有独立库，因此使用它的唯一方法是通过 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>

推荐阅读