我可以从CDN使用React-Select Async(AsyncSelect)吗? (我收到了Uncaught ReferenceError:未定义导出)

时间:2019-05-03 18:35:08

标签: 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的引用,但我不知道如何使用https://react-select.com/async中所示的AsyncSelect组件

这是我使用库的方式:

<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 -->

1 个答案:

答案 0 :(得分:1)

如果您参考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>