如何使用 React 和 Babel 從 React-Select CDN 導入？

Question

我按照React 網站上的步驟創建了一個 React 應用程序，但我在使用React-Select 庫（尤其是 Select 組件）時遇到問題。

我只能使用cdn文件來加載依賴，包括位於cdnjs上的React-Select cdn文件

https://cdnjs.cloudflare.com/ajax/libs/react-select/2.1.2/react-select.js

我的反應應用程序出現以下錯誤：

ReferenceError: Select is not defined[Learn More]

請參閱下面的腳本和此處的代碼筆

  <html> 
    <head>
      <meta charset="utf-8">
      <script src="https://unpkg.com/react@15.0.0/dist/react-with-addons.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.min.js"></script>
      <script src="https://unpkg.com/react-dom@0.14.0/dist/react-dom.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react-select/2.1.2/react-select.js"></script>
      <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
      <title>Using React Select CDN</title>
    </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
              value={selectedOption}
              onChange={this.handleChange}
              options={options}
            />
            </div>
          );
        }
      }

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

我還嘗試了以下拋出相同錯誤的方法

  <html> 
    <head>
      <meta charset="utf-8">
      <script src="https://unpkg.com/react@15.0.0/dist/react-with-addons.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.min.js"></script>
      <script src="https://unpkg.com/react-dom@0.14.0/dist/react-dom.min.js"></script>


      <script src="https://cdnjs.cloudflare.com/ajax/libs/react-select/2.1.2/react-select.js"></script>
      <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react-select/2.1.2/react-select.js"></script>

      <title>Using React Select CDN</title>
    </head>
    <body>
      <div id="root"></div>

      <script type="text/babel">

      require(['react-select'])
      import Select from 'react-select';
      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
              value={selectedOption}
              onChange={this.handleChange}
              options={options}
            />
            </div>
          );
        }
      }

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

我怎樣才能讓 React-Select 工作？ 也許

Answer 1

它尋找最新的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>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

如何使用 React 和 Babel 從 React-Select CDN 導入？

問題描述

1 個解決方案

解決方案1
5 已采納 2018-12-26 08:40:30

如何使用 React 和 Babel 從 React-Select CDN 導入？

問題描述

1 個解決方案

解決方案1 5 已采納 2018-12-26 08:40:30

解決方案1
5 已采納 2018-12-26 08:40:30