如何为文本区域键入道具反应打字稿

Question

I have a react component that looks like this:

import { TextareaHTMLAttributes} from 'react'
import styled from 'styled-components'

const TextAreaElement = styled.textarea`
  border-radius: 40px;
  border: none;
  background: white;
`

const TextArea = (props: TextareaHTMLAttributes<any>) => {  <--- replace <any> here
  return <TextAreaElement {...props} />
}

I know I can do something like this, but would rather not have to add every prop manually:

const TextArea = ({placeholder} : {placeholder: string}) => {
  return <TextAreaElement placeholder={placeholder} />
}

Answer 1

You can pass the props as regular HTML element

import React from "react";

const CustomTA = (props: React.HTMLProps<HTMLTextAreaElement>) => {
  return <textarea {...props} />;
};