🦎

React + TS で動的にタグを変える方法

2021/07/27に公開4件

styled-components の as みたいなものどうやってやるんだろうと思い調べてみたので共有です。
結論から書くと次のようにすればいけました。

type Props = {
  as?: React.ElementType;
  text: string;
};

const ReactMozidume: React.VFC<Props> = ({ as: CustomTag = "p", text }) => {
  return (
    <CustomTag>
      {text}
    </CustomTag>
  );
};

~~as keyof JSX.IntrinsicElements のキャストがないと valid な　HTML タグかを TS が分からないので~~

~~Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes'.ts(2559)~~

~~というエラーを吐いてしまいます。~~

Discussion

Hiroki Sakano

asの型の部分、stringの代わりにReact.ElementTypeとすると、ある程度簡単に限定できると思いますが、いかがでしょうか？

type Props = {
-  as?: string;
+  as?: React.ElementType;
  text: string;
};

seya

そんな便利型が！ありがとうございます！

sunnyone

ElementTypeはIntrinsicElementsを抱えているのでキャストは不要なのではないでしょうか。こんなのでよさそうです：

const ReactMozidume: React.VFC<Props> = ({ as: CustomTag = "p", text }) => 
    <CustomTag>{text}</CustomTag>;

seya

おお、本当だキャストなくしてもコンパイル通りましたね。
ご指摘ありがとうございます！！