找不到模块react-select with material ui示例

Question

在我自己的例子中，我正在努力实现一个带有material 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. Install react-select使用，

在组件中yarn add react-select / npm install react-select --save

• Import默认导出和渲染：

import Select from 'react-select'

• Usage，

<Select options={options} />

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

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