找不到带有材料 ui 示例的模块 react-select

Question

在我自己的示例中，我正在努力实现一个带有材料 ui 的 react-select 版本。文档中给出的示例非常复杂。 https://material-ui.com/components/autocomplete/

当我尝试复制代码时出现以下错误

ERROR in [at-loader] ./src/public/components/select.tsx:13:37
    TS2307: Cannot find module 'react-select/lib/components/containers'.

对于以下依赖项。

import { ValueContainerProps } from "react-select/lib/components/containers";
import { ControlProps } from "react-select/lib/components/Control";
import { MenuProps, NoticeProps } from "react-select/lib/components/Menu";
import { MultiValueProps } from "react-select/lib/components/MultiValue";
import { OptionProps } from "react-select/lib/components/Option";
import { PlaceholderProps } from "react-select/lib/components/Placeholder";
import { SingleValueProps } from "react-select/lib/components/SingleValue";
import { ValueType } from "react-select/lib/types";

我已经安装了 @types/react-select 和 react-select。

Answer 1

您可以尝试导入类似（没有实际路径）-

import { ValueContainerProps } from "react-select";

react-select 中也没有“lib”文件夹。你确定你给出了正确的路径吗？

Answer 2

您在帖子中提供的链接，即 - https://material-ui.com/components/autocomplete/

此链接不包含任何导入的示例

import { ValueContainerProps } from "react-select/lib/components/containers";
import { ControlProps } from "react-select/lib/components/Control";
import { MenuProps, NoticeProps } from "react-select/lib/components/Menu";
import { MultiValueProps } from "react-select/lib/components/MultiValue";
import { OptionProps } from "react-select/lib/components/Option";
import { PlaceholderProps } from "react-select/lib/components/Placeholder";
import { SingleValueProps } from "react-select/lib/components/SingleValue";
import { ValueType } from "react-select/lib/types";

让您的react-select 工作的简单步骤，

1. 安装react-select使用，

   yarn add react-select / npm install react-select --save

2. 在您的组件中导入默认导出和渲染：

   import Select from 'react-select'

3. 用法，

   <Select options={options} />

你需要在这里传递options，选项只是你的下拉选项。

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]