スポンサーリンク

React-コンポーネント

まずはコンポーネント

※Reactを学習したい人は「Reactチュートリアル」で学習してみてください。このブログはこのチュートリアルで感じたことや自分のメモを記述していきます。

Reactはユーザインターフェースをコンポーネントという機能単位で分割し構築するようだ。例えば今回の三目並べでは次のコンポーネントで構成されている。

・Square(正方形のマス目)

・Board(盤面)

・Game

これらコンポーネントを組み合わせユーザインタフェースを構築する。

コンポーネントには色々な種類があるようだが、ここに登場しているのは基本的なコンポーネントだ。そしてコンポーネント間でデータを受け渡す「props」というのがある。チュートリアルではこれを体感できるコードが記載されいる。

データの受け渡し

コンポーネントBoardからSquareへ値を受け渡す。まずBoardのrenderSquareメソッドを次のように変更する。

これにより変数valueに変数iの値が設定され、Squareへ受け渡される。コンポーネントSquareは次のように変更する。

「{this.props.value}」命令で受け渡された変数valueの値を表示している。

実行してみる

ブラウザを更新し再表示してみる。

「props」でデータを受け渡すことができた。次に進む。

前へ<ーーー>つづく

タイトルとURLをコピーしました