Reactでコンポーネントを切り出して読み込んでみた
Reactで処理を切り出したくなったので、コンポーネント化し、読み込むまでを記録してみました。TypeScriptもつかって型付けも行っていこうと思います。
1. 切り出す前の状態
切り出す前のコンテンツはこんな感じだとします。アロー関数で定義しています。
export const HogeHoge: React.FC = () => {
return (
<div>
<h1>タイトル</h1>
<div className="contents1">コンテンツ1</div>
<div className="contents2">コンテンツ2</div>
<div className="contents3">コンテンツ3</div>
</div>
);
};
React.FCというのは、Reactで使うコンポーネントの型のようです。これの「コンテンツ3」を切り出してみたいと思います。
ちなみに「HogeHoge.tsx」というファイル名ですが、TypeScriptを使ったJSXは「.tsx」になるようです。TypeScriptを使わない場合は「.jsx」です。ちなみにreturn()の中のHTMLともJavascriptとも取れないやつをJSXというらしいです。
2. コンポーネントに切り出し
こんな感じですかね。
export const Contents3: React.FC = () => {
return (
<div className="contents3">
コンテンツ3
</div>
);
};Contents3というコンポーネント名にしました。型はReactのコンポーネントなので「React.FC」ですね。シンプルです。親と同じディレクトリに保存しました。
3. 親コンポーネント側で読み込む
こんな感じですね。
import Contents3 from "Contents3"
export const HogeHoge: React.FC = () => {
return (
<div>
<h1>タイトル</h1>
<div className="contents1">コンテンツ1</div>
<div className="contents2">コンテンツ2</div>
<Contents3 />
</div>
);
};
さきほど作った「Contents3」をimportし、「<Contents3 />」として配置しました。これで完成です。閉じタグを忘れずに入れなくてはいけないみたいですね。
4. 値を渡す
それではさらに改良して行きたいと思います。次は作ったコンポーネントに値を渡してみたいと思います。渡す値は「テスト」という文字列です。TypeScriptが難しくなるのはこの辺からですね。まずは切り出したコンポーネントに値を受け取る処理を加えます。
// 型定義
type Props = {
value: string
}
export const Contents3: React.FC<Props> = (value) => {
return (
<div className="contents3">
コンテンツ3{value}
</div>
);
};引数「value」を追加し、型を作ります。名前はなんでもいいのですが、わかりやすく「Props」とつけてみます。Propsはtypeをつけて定義しました。valueは文字列なので型はstringを指定します。そしてreturnの中に{value}と書けば表示できるようです。
次に読み込み元である親コンポーネントを変更していきます。
import Contents3 from "Contents3"
export const HogeHoge: React.FC = () => {
return (
<div>
<h1>タイトル</h1>
<div className="contents1">コンテンツ1</div>
<div className="contents2">コンテンツ2</div>
<Contents3 value={テスト} />
</div>
);
};こんな感じでタグのなかに渡す変数名と変数の値を指定してあげればOKみたいです。値は配列も関数もいろいろ入れれるみたいです。機能別に細かく切り出していけばテストもしやすいしいいですね。
今回は以上です！