なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ﾉ

2023/06/13

React で子コンポーネントのテキストのみを取り出したい

カテゴリー：

React で children で渡ってきた子コンポーネントのうち、テキスト部分だけ取り出したいこと、ありますよね？
そういうときに便利なのが React Children Utilities です。

こんな感じで使えます。

import Children from "react-children-utilities";
 
type Props = {
  children: React.ReactNode;
};
 
const ExtractOnlyText = ({ children }: Props) => {
  const text = Children.onlyText(children);
  return <div>{text}</div>;
};

他にも span 要素だけ取り出すみたいなことも出来るようです。すごい。
ということで、メモでした。

ちなみにライブラリなんぞいれたくねぇ！って人はこのコメントのコードを使うと良いです。