不使用npm或yarn，如何在React项目中引入React Select包？

云原生阿岚

2026-5-14

无需包管理器引入React Select的极简方案

当然可以！完全不用npm、yarn或者webpack这些工具，就像你引入React和ReactDOM那样，直接通过CDN的script标签就能搞定React Select的引入，而且配置超简单，我给你一步步说：

第一步：引入React Select的UMD脚本
直接在你现有的React和ReactDOM脚本后面，加上这行script标签：
```
<script crossorigin src="https://unpkg.com/react-select@5/dist/react-select.umd.js"></script>
```
这里用的是React Select 5.x版本的UMD包，unpkg会自动帮你拉取对应的资源。生产环境建议固定版本，可以把@5改成具体版本号（比如@5.7.7），避免意外更新导致的兼容性问题。
第二步：引入React Select的样式
React Select的样式是单独的CSS文件，必须引入才能让组件正常显示，所以在HTML的<head>里加一行link标签：
```
<link rel="stylesheet" href="https://unpkg.com/react-select@5/dist/react-select.css">
```

第三步：使用React Select组件
现在你可以直接通过全局变量ReactSelect来使用这个组件了，举个简单的示例：

<!-- 先准备好根容器 -->
<div id="root"></div>

<script>
  // 定义下拉选项
  const fruitOptions = [
    { value: 'apple', label: '苹果' },
    { value: 'banana', label: '香蕉' },
    { value: 'cherry', label: '樱桃' }
  ];

  // 渲染React Select组件
  ReactDOM.render(
    <ReactSelect options={fruitOptions} placeholder="选择一种水果" />,
    document.getElementById('root')
  );
</script>

如果是生产环境，建议使用压缩后的资源来提升加载速度：