Могу ли я использовать React-Select Async (AsyncSelect) из CDN? (Я получаю Uncaught ReferenceError: экспорт не определен) - PullRequest
Новая
       12

Могу ли я использовать React-Select Async (AsyncSelect) из CDN? (Я получаю Uncaught ReferenceError: экспорт не определен)

2 голосов
/ 03 мая 2019

По запросу менеджера проекта я не могу связать это с 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 есть ссылки на Async & AsyncSelect но я не могу понять, как использовать компонент 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 -->

1 Ответ

1 голос
/ 06 мая 2019

Если вы обратитесь к этому другому вопросу и скопируете / вставите все зависимости в этом ответе, вы сможете получить доступ к 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>
...