reactjs - 如何从包装 React 组件传入material-ui TextField 的变体属性

Question

我遇到打字问题...

基本上，我有一个用于 @material-ui TextField 的包装 React 组件，但我无法获得变体属性的正确类型。

这是问题的要点。 @material-ui/core 3.9.3

import MuiTextField, {TextFieldProps} from "@material-ui/core/TextField";

interface MyTextFieldProps {
...
  variant?: TextFieldProps["variant"];
}

class MyTextField extends React.Component<MyTextFieldProps> {
...
  render() {

    return
    ...other stuff
      <MuiTextField
      variant={this.props.variant} />
    ...;
  }
}

对于 MuiTextField 实例，我收到以下编译错误:...

Types of property 'variant' are incompatible.
        Type '"outlined" | "filled"' is not assignable to type '"outlined"'.
          Type '"filled"' is not assignable to type '"outlined"'.

我可以将其进一步压缩为 Prop 类型:

xx() {
    const variant: TextFieldProps["variant"] = this.props.variant;
    const props : TextFieldProps = {
      variant,
    };
}

并得到相同的错误，即变体值(输入为变体属性的确切类型)与其自身的类型不兼容。

这是怎么回事？

TextField.d.ts 中的定义如下所示:

export interface StandardTextFieldProps extends BaseTextFieldProps {
  variant?: 'standard';
  InputProps?: Partial<StandardInputProps>;
  inputProps?: StandardInputProps['inputProps'];
}

export interface FilledTextFieldProps extends BaseTextFieldProps {
  variant: 'filled';
  InputProps?: Partial<FilledInputProps>;
  inputProps?: FilledInputProps['inputProps'];
}

export interface OutlinedTextFieldProps extends BaseTextFieldProps {
  variant: 'outlined';
  InputProps?: Partial<OutlinedInputProps>;
  inputProps?: OutlinedInputProps['inputProps'];
}

export type TextFieldProps = StandardTextFieldProps | FilledTextFieldProps | OutlinedTextFieldProps;

更新

正如 Daniel 指出的，这是 Typescript 不知道如何处理联合类型。

您可以使用这样的辅助函数来解决这个问题(丑陋)

import { TextFieldProps, BaseTextFieldProps } from "@material-ui/core/TextField";

const getProps = (
  baseProps: BaseTextFieldProps,
  variant: TextFieldProps["variant"]
): TextFieldProps => {
  switch (variant) {
    case "filled":
      return { ...baseProps, variant };
    case "outlined":
      return { ...baseProps, variant };
    default:
      return { ...baseProps, variant };
  }
};

然后将其用作 <TextField ...getProps({value:"text"}, variant) />但它很丑。

我什至冒险将其归类为 typescript 问题，因为它应该能够弄清楚不同变体特有的所有 Prop 都是可选的。

Answer 1

我也有同样的问题。

错误的原因是他们定义了

TextFieldProps = 标准TextFieldProps |填充文本字段属性 | OutlinedTextFieldProps

OutlinesTextFieldProps 需要变量值为“outlined”FilledTextFieldProps 需要变量值为“filled”

等等

问题在于编译时不知道变量的值。在您的代码中，它是一个变量，因此其类型为 'filled' | “概述”。该类型与三种类型定义中的任何一种都不兼容，每种类型定义都需要“轮廓”、“填充”或“标准”之一

除了 as any 技巧之外，我能想到的唯一其他选择是使用变量的静态值实例化 textfeilds，但这需要大量额外的工作。像这样的东西:

{ this.props.variant === 'outlined' && (
  <MuiTextField
    variant="outlined"
   />
)}
{ this.props.variant === 'filled' && (
  <MuiTextField
    variant="filled"
   />
)}

编辑 - 2019 年 3 月 6 日

material-ui github 上出现了一个错误，并发布了另一个可能的解决方案

https://github.com/mui-org/material-ui/issues/15697#issuecomment-493419773