前回からの続きです。
データを Props 経由で渡す
マスに数字がプロットされた次のようなアウトプットを想定します。
公式チュートリアルでは、
class Board extends React.Component { renderSquare(i) { return <Square value={i} />; // 追加 } } // ︙ class Square extends React.Component { render() { return ( <button className="square"> {this.props.value} // "TODO"になっていたところを変更 </button> ); } }
でOKでした。
TypeScriptを使う
まず、Square
コンポーネントに渡されるprops
の型エイリアスSquareProps
を定義します。
type SquareProps = { value: number; };
Square
コンポーネントに渡されるのはvalue
で、これは0~8の数字なので、number型にします。
次に、Square
コンポーネントは下のようになります。
const Square: VFC<SquareProps> = ({ value }) => ( <button type="button" className="square"> {value} </button> );
ジェネリクスVFC<SquareProps>
のように書くことで、コンポーネントのpropsの型を指定できます。
SquareProps
からvalue
を抜き出し、button
に表示するシンプルなコードです。
インタラクティブなコードをつくる
ここは公式チュートリアルと同じです。
<button type="button" className="square" onClick={() => { alert('click'); }} >
チュートリアルにも書かれていますが、注意するポイントはonClick={() => { alert('click'); }
です。よくある間違いとして記載してあります。
ここまでのコードはこちら
次回はStateの取り扱いから書いていこうと思います!