🦎

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 2021/07/27に更新

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

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

seya 2021/07/27

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

sunnyone 2021/07/27

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

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

seya 2021/07/27

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