前回までの状態
別ファイルの関数コンポーネントを呼び出した。
今回の目的
クラスコンポーネントと関数コンポーネントについて学習する。
コンポーネントについて
Reactで使用できるコンポーネントには以下の2種類記述方法がある。
- 関数コンポーネント
- クラスコンポーネント
どちらとも名前の通り、関数コンポーネントは関数の書き方、クラスコンポーネントはクラスの書き方で記述する。
関数コンポーネント
手順
前回app.tsxに作成したPrintHelloWorldは関数コンポーネントである。
const PrintHelloWorld =()=> {
return (
<h1>Hello, world!</h1>
);
}
関数であるため、入力を受け取ることが可能。
app.tsxのPrintHelloWorldを以下のように変更する。
//変更開始
const PrintHello = ({ name }:{name:string}) => {
//変更終了
return (
//変更開始
<h1>Hello, {name}!</h1>
//変更終了
);
}
//変更開始
export { PrintHello };
//変更終了
index.tsxを以下のように変更する。
import React from 'react';
import ReactDOM from 'react-dom';
//変更開始
import {PrintHello} from './app';
//変更終了
ReactDOM.render(
<React.StrictMode>
{/* 変更開始 */}
<PrintHello name='Taro'/>
{/* 変更終了 */}
</React.StrictMode>,
document.getElementById('root')
);
プログラム実行後、以下のように"Hello, Taro!"と表示されたら成功。
解説
app.tsx
const PrintHello = ({ name }:{name:string}) => {}
関数コンポーネントで入力をとるように変更している。
Reactのコンポーネントにおける入力は一般的に“props”と呼ばれる。
関数頭のかっこ内は{引数変数名}:{引数変数名:型}となる。
また、変数でこんにちはする相手が変わるのでコンポーネント名を"PrintHello"に変更している。
<h1>Hello, {name}!</h1>
変数を使用した文を返すように変更している。
export { PrintHello };
コンポーネント名を変更したためによるexport文の変更。
import {PrintHello} from './app';
コンポーネント名を変更したためによるimport文の変更。
<PrintHello name='Taro'/>
コンポーネントにname='Taro'を引数として受け渡している。記述方法は<関数コンポーネント名 引数名=内容/>となる。
引数を複数にするには
app.tsxのPrintHelloを以下のように変更する。
const PrintHello = ({ name, name2 }: { name: string, name2: string}) => {
return (
<h1>Hello, {name},{name2}!</h1>
);
}
またindex.tsxのPrintHelloWorldを以下のように変更すると、引数が2つの関数コンポーネントを宣言、使用できる。
<PrintHello name='Taro' name2='Jiro'/>
クラスコンポーネント
手順
app.tsxに以下Nowクラスコンポーネントを追加する。(PrintHelloコンポーネントは引数が2つの場合のものに変更している)
//追加開始
import React from 'react';
//追加終了
const PrintHello = ({ name, name2 }: { name: string, name2: string }) => {
return (
<h1>Hello, {name},{name2}!</h1>
);
}
export { PrintHello };
//追加開始
class Now extends React.Component {
constructor(props: any) {
super(props);
this.state = new Date();
}
render() {
return (
<div>
<h2>{String(this.state)}</h2>
</div>
)
}
}
export { Now };
//追加終了
index.tsxは以下のように変更する。
import React from 'react';
import ReactDOM from 'react-dom';
import {PrintHello} from './app';
//追加開始
import {Now} from './app';
//追加終了
ReactDOM.render(
<React.StrictMode>
<PrintHello name='Taro' name2='Jiro'/>
{/* 追加開始 */}
<Now />
{/* 追加終了 */}
</React.StrictMode>,
document.getElementById('root')
);
下のように現在日時が追加で表示されていたら成功。
解説
app.tsx
import React from 'react';
クラスコンポーネントは、React.Componentクラスを継承して作成するため、reactをインポートする。
//追加開始
class Now extends React.Component {
constructor(props: any) {
super(props);
this.state = new Date();
}
render() {
return (
<div>
<h2>{String(this.state)}</h2>
</div>
)
}
}
export { Now };
//追加終了
クラスコンポーネント。通常のクラスと同様にコンストラクタを作成できる。関数コンポーネントと同様にprops(入力)を扱うことができる。
クラスコンポーネントは関数コンポーネントと違い、このNowクラスではコンストラクターでstateに現在日時を格納している。
描画内容はrender関数を使用して返却する。
index.tsx
関数コンポーネント追加時と同様のことをしているため省略。
要約
Reactで使用できるコンポーネントには以下の2種類がある。
- 関数コンポーネント
- クラスコンポーネント
関数コンポーネント、クラスコンポーネントともにprops(入力)を受け取ることができる。クラスコンポーネントはstateというオブジェクトを使用して、情報を保持することができる。