旧gaaamiiのブログ

間違ったことを書いている時があります。コメントやTwitter、ブコメなどでご指摘ください

HTML要素を加工したReactコンポーネントに属性値を渡して展開して入れ込む方法

具体的にはlabelみたいなものですね。Labelというコンポーネントを作って、htmlのlabelと同じように属性値を渡しつつ、独自のスタイルを当てたりするコンポーネントをつくりたいみたいな。

こうする

const Label = (props: React.Props<{}> & React.HTMLLabelAttributes<HTMLLabelElement>) => {
  const { children, ...attributes } = props
  return <label {...attributes}>{children}</label>
}