如何使用 React 和 Babel 从 React-Select CDN 导入？

在 ReactJs 中，从 React-Select CDN 导入并不像我们使用 npm 包那样简单。要使用它们，我们需要在 HTML 文件中直接使用它们。它不适用于通过创建反应应用程序设置的项目。

CDN 链接：要通过 React 和 Babel 导入和使用 React-Select 和 CDN，我们将获取一个 HTML 文件，其中包括下面给出的所有 CDN 链接：

示例：以下示例介绍了如何使用 React 和 Babel 从 React-Select CDN 导入。

项目设置：创建一个名为 example 的文件夹并在该文件夹内移动并创建文件 index.html 和 index.css。项目结构将如下所示。

文件夹结构

index.html

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    React Select CDN with React and Babel


    
    
      const options = [
        { value: 'Jan', label: 'Jan' },
        { value: 'Feb', label: 'Feb' },
        { value: 'Mar', label: 'Mar' }
      ];
  
      class App extends React.Component {
        state = {
          option: null,
        }
        fun = (option) => {
          this.setState({ option });
        }
        render() {
          const { option } = this.state;
  
          return (
            <div class="container">
              Select the one
              <Select
                value={option}
                onChange={this.fun}
                options={options}
              />
              <div class="small">Option selected: </div>
              {option && option.label}
            </div>
          );
        }
      }
        
      ReactDOM.render(<App />, document.querySelector("#root"))
    

index.css – 将这些样式添加到 CSS 文件中。

索引.css

/* Write CSS Here */
.container
{
    width: 40%;
    margin: 0 auto;
}
  
.small
{
    margin: 20px;
}

运行应用程序的步骤：在浏览器中打开 HTML 文件，或者如果使用 lite 服务器打开它。

输出：在这里，我们可以使用带有 CDN 链接的 react-select。

使用 React 和 Babel 从 React-Select CDN 导入