0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

TypeScript+Reactでの関数コンポーネントとクラスコンポーネント(転何知人T+Rその4)

Last updated at Posted at 2021-07-14

前回までの状態

別ファイルの関数コンポーネントを呼び出した。

今回の目的

クラスコンポーネントと関数コンポーネントについて学習する。

コンポーネントについて

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!"と表示されたら成功。

スクリーンショット 2021-07-13 154242.png

解説

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'/>

スクリーンショット 2021-07-13 160558.png

クラスコンポーネント

手順

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')
);

下のように現在日時が追加で表示されていたら成功。

スクリーンショット 2021-07-14 134059.png

解説

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というオブジェクトを使用して、情報を保持することができる。

React HooksとuseState

派生記事

参考文献

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?