【问题标题】:Is it possible to use react-select in the browser from the cdn?是否可以在 cdn 的浏览器中使用 react-select ?
【发布时间】:2020-10-31 16:24:49
【问题描述】:

是否可以直接从浏览器中使用 react-select 而无需 现在的打包机?

我发现能够做到这一点的最新版本是 2.1.2: How to import from React-Select CDN with React and Babel?

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

现在他们有 react-select.browser.esm.jsreact-select.browser.cjs.js (https://unpkg.com/browse/react-select@3.1.0/dist/),但我无法让其中任何一个在浏览器中工作。

【问题讨论】:

  • 运气好吗?
  • @harrrrrrry 我已经切换到 Svelte。这是一个不错的intro

标签: javascript reactjs react-select commonjs es6-modules


【解决方案1】:

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

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>

【讨论】:

  • 是的,现在我记得我已经走了这么远。手动添加的脚本标签的数量让我觉得它有问题。无论如何+1)我真正无法用这种方法处理的是async plugin。我需要在输入时获取建议列表。并且不使用unpkg打包。
猜你喜欢
  • 2010-10-06
  • 2020-02-23
  • 2012-10-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-11-02
  • 2010-10-09
  • 1970-01-01
相关资源
最近更新 更多