распространять реквизиты в реакции с помощью машинописного текста

Question

Когда я впервые начал адаптировать машинописный текст в React, я заметил, что не могу использовать ...props, поскольку машинописный текст проверяет каждую отдельную опору, переданную в компонентах. Это здорово, но также раздражает, когда я должен декларативно передавать собственные реквизиты, такие как id, name и c, в качестве реквизита.

interface MyComponentProps {
  name: string,
  id: string,
  placeholder: string
}

const MyComponent = ({
  name,
  id,
  placeholder
}: MyComponentProps) => {
  return <input type="text" placeholder={placeholder} name={name} id={id}/>
}
export default function App() {
  return (
    <div className="App">
      <MyComponent placeholder="Name" name="something" id="myInput" />
    </div>
  );
}

Answer 1

Вы должны отредактировать свой интерфейс так, чтобы он расширял свойства элемента HTML input:

interface MyComponentProps extends InputHTMLAttributes< HTMLInputElement>)  {
  // add other custom props
}

const MyComponent: React.FC<MyComponentProps> = (props) => (...)

Answer 2

Вы можете явно преобразовать его в HTMLAttributes

Объявить интерфейс, например объединение свойств компонента с HTMLAttributes

interface MyComponentProps = {}

const MyComponent: React.FC<MyComponentProps & HTMLAttributes>...

Подробное объяснение вы можете найти здесь: { ссылка }