javascript - 不能在 React 中将 react-input-mask 与子组件一起使用

Question

我想屏蔽 Material UI TextField，在网上阅读了一些解决方案后我得到了这段代码:

       <InputMask
          mask="(0)999 999 99 99"
          value={phone}
          disabled={false}
          onChange={handleChange}
        >
          {(inputProps: Props & TextFieldProps) => (
            <TextField
              {...inputProps}
              type="tel"
              label={t("addDriverModal.phone")}
            />
          )}
        </InputMask>

但它给我带来了这个错误:

No overload matches this call.
  Overload 1 of 2, '(props: Props | Readonly<Props>): ReactInputMask', gave the following error.
    Type '(inputProps: Props & TextFieldProps) => JSX.Element' is not assignable to type 'ReactNode'.
  Overload 2 of 2, '(props: Props, context: any): ReactInputMask', gave the following error.
    Type '(inputProps: Props & TextFieldProps) => JSX.Element' is not assignable to type 'ReactNode'.ts(2769)

所以我不能将 TextField 作为子组件传递给 InputMask 组件。

我也试过这个解决方案:

        <InputMask
          mask="(0)999 999 99 99"
          value={phone}
          disabled={false}
          onChange={handleChange}
        >
          <TextField
            id="outlined-basic"
            label="Teléfono"
            variant="outlined"
            style={{
              border: "2px solid #fff",
              borderRadius: "4px",
              color: "white",
            }}
            InputLabelProps={{ style: { color: "white" } }}
            sx={{ input: { color: "white" } }}
          />
        </InputMask>

但是当我启动应用程序时，在控制台中显示此错误:

Uncaught Invariant Violation: react-input-mask: children must be a function

所以我真的不能使用任何解决方案来屏蔽我的 MUI TextField。我正在使用这个版本:

   "react": "^18.1.0",
   "react-dom": "^18.1.0",
   "react-input-mask": "^2.0.4",
   "@types/react": "^18.0.0",
   "@types/react-dom": "^18.0.0",
   "@types/react-input-mask": "^3.0.1",

我正在使用 Typescript 和功能组件。

Answer 1

您使用的类型定义包与包的版本不对应。您应该:

• 将@types/react-input-mask降级到2.0.4以匹配包
• 或将 react-input-mask 升级到版本 3.0.0-alpha.2 以匹配输入。