Перенос подмножества свойств в дочерний компонент в Typescript React

Question

Я создал стилизованный компонент InputText, который я использую в своих формах. Я не хочу повторять все возможные входные свойства в своем определении реквизита, поэтому я расширил React 1.

import React, { useState, LegacyRef } from "react";
import Container, { ContainerProps } from "./Container";

export type InputTextProps = ContainerProps &
  React.InputHTMLAttributes<HTMLInputElement> & {
    inputRef?: LegacyRef<HTMLInputElement>;
  };

const InputText: React.FC<InputTextProps> = (props) => {
  return (
    <Container {...(props as ContainerProps)} focused={focused}>
      <input
        className="p-2 leading-normal rounded focus:outline-none border-box w-full"
        {...(props as React.InputHTMLAttributes<HTMLInputElement>)}
        ref={props.inputRef}
      />
    </Container>
  );
};

export default InputText;

Но теперь у меня есть эта ошибка в моей консоли Javascript, которая имеет смысл

index.js:1 Warning: React does not recognize the `inputRef` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `inputref` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Есть ли простой способ добиться этого простого наследования реквизита в React или Typescript?

Answer 1

Я полагаю, что он жалуется либо на props as React.InputHTMLAttributes<HTMLInputElement> (а может и на props as ContainerProps). Шаблон, который мне нравится в этом сценарии, заключается в деконструкции реквизита, который вы хотите распространять как ...rest. Для вас это означает:

const InputText: React.FC<InputTextProps> = ({
  inputRef,
  ...rest
}: InputTextProps) => {
  return (
    <Container {...(rest as ContainerProps)} focused={focused}>
      <input
        className="p-2 leading-normal rounded focus:outline-none border-box w-full"
        {...(rest as React.InputHTMLAttributes<HTMLInputElement>)}
        ref={props.inputRef}
      />
    </Container>
  );
};

Кроме того, приведение типов обычно является плохой практикой. Есть ли какая-то конкретная причина, почему вам это нужно? Переполнение реквизита хорошо с помощью TypeScript.