javascript - 我可以使用来自 CDN 的 React-Select Async (AsyncSelect) 吗? (我收到 Uncaught ReferenceError : exports is not defined)

标签 javascript reactjs react-select

根据项目经理的要求,我不能将它与 npm 捆绑在一起,所以我坚持使用每个库的 CDN 版本。
到目前为止,一切都运行良好,React、Material-UI、React-Select 和 Babel。

但是尝试包含 Async.js ( https://unpkg.com/react-select/lib/Async.js ) 给我 Uncaught ReferenceError: exports is not defined

我在 https://unpkg.com/react-select/dist/react-select.js 中看到了有对 AsyncAsyncSelect 的引用,但我不知道如何使用 AsyncSelect 组件,如 https://react-select.com/async 所示。

这就是我使用库的方式:

<script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js"></script>
<script src="https://unpkg.com/react-select@2.1.2/dist/react-select.js"></script>
<!-- ... and other dependencies -->

最佳答案

如果你引用this other question并复制/粘贴此答案中的所有依赖项,您将能够访问 react-select 元素。

<script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/emotion@9.2.12/dist/emotion.umd.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.5.10/prop-types.min.js"></script>
<script src="https://unpkg.com/react-input-autosize@2.2.1/dist/react-input-autosize.min.js"></script>
<script src="https://unpkg.com/react-select@2.1.2/dist/react-select.min.js"></script>

完成后,Async 特定组件将可以通过 Select.Async 访问,如下例所示:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/emotion@9.2.12/dist/emotion.umd.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.5.10/prop-types.min.js"></script>
<script src="https://unpkg.com/react-input-autosize@2.2.1/dist/react-input-autosize.min.js"></script>
<script src="https://unpkg.com/react-select@2.1.2/dist/react-select.min.js"></script>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
<body>
 <div id="root"></div>
      <script type="text/babel">


      const options = [
        { value: 'chocolate', label: 'Chocolate' },
        { value: 'strawberry', label: 'Strawberry' },
        { value: 'vanilla', label: 'Vanilla' }
      ];

      class App extends React.Component {
        state = {
          selectedOption: null,
        }
        handleChange = (selectedOption) => {
          this.setState({ selectedOption });
          console.log(`Option selected:`, selectedOption);
        }
        render() {
          const { selectedOption } = this.state;

          return (
            <div>
            Test Text
            <Select.Async
              value={selectedOption}
              onChange={this.handleChange}
              options={options}
            />
            </div>
          );
        }
      }

      ReactDOM.render(<App/>, document.querySelector("#root"))
      </script>
    </body>
</html>
  

关于javascript - 我可以使用来自 CDN 的 React-Select Async (AsyncSelect) 吗? (我收到 Uncaught ReferenceError : exports is not defined),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55975437/

相关文章:

javascript - 更改在发生过程中创建框的速度(与 DOM "change"事件相关)

javascript - 我可以使用 HOC 用 graphql 和 redux 包装组件吗

reactjs - MapStateToProps 依赖于组件的 props

javascript - this.state 在子组件中未定义

javascript - 如何更改选定的 react 选择输入颜色?

javascript - backbone js 对我的联系人列表进行排序

javascript - SVG 转 PNG 转 AJAX API 帖子

javascript - 如何提交铁表单并触发表单的 Action ?

reactjs - React-select - 选项不集中于所选值

reactjs - React-Select - 带有自定义处理程序的可点击值