React 入門 (3) ～ Type Script を使って独自コンポーネントを作成～

これを参考に Type Scriptのコンポーネントを作成する。全部を作成するのは大変なので、ボタンのテキストを更新するコンポーネントを作成するのみとする。んで、昨日作った環境に追加する形ですすめる。

GitHub - bamchoh/react-study at 0013892889de3364ced52eb9e56c35639764f5f4

まずは以下のように作成して、src/components/Rect.tsx として作成

import * as React from "react";

interface RectProps {
    num: number;
    bgcolor: string;
}

interface RectState {
    num: number;
}

export class Rect extends React.Component<RectProps, RectState> {
    style = {}

    constructor(props: RectProps) {
        super(props)
        this.state = {
            num: props.num,
        };

        this.style = {
            width: 50,
            height: 50,
            background: this.props.bgcolor,
        }
    }

    onIncrement() {
        var num = this.state.num + 1
        this.setState({num})
    }

    render() {
        return (
            <button style={this.style} className="square" onClick={this.onIncrement}>
            Hello {this.state.num}
            </button>
        )
    }
}

src/index.tsx は以下のように変更

import * as React from "react";
import * as ReactDOM from "react-dom";

import { Rect } from "./components/Rect";

ReactDOM.render(
    <div>
        <Rect num={1} bgcolor="#00FF00" />
        <Rect num={2} bgcolor="#FF0000" />
    </div>,
    document.getElementById("root")
);

ただ、これだとクリックしても onIncrement が完全には実行されない。デバッグツールで確認すると、state が未定義になっているようだ。

【TypeScript】thisの使い方にハマった！thisを保持する3つの方法 | Black Everyday Company

この記事によると typescript の this は特殊なようで、アロー関数で解決できると書いてある。

GitHub - Microsoft/TypeScript-React-Starter: A starter template for TypeScript and React with a detailed README describing how to use the two together.

確かに、ここらへんをみてもアロー関数を使っているので、これが正解っぽい？

ということで、Rect.tsx のその部分を変更

   // この部分
    onIncrement = () => {
        var num = this.state.num + 1
        this.setState({num})
    }

これでボタンを押すと数字がインクリメントする。

完成品は以下

GitHub - bamchoh/react-study at 2019-01-24