React-コンポーネント

まずはコンポーネント
データの受け渡し
実行してみる

まずはコンポーネント

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

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

・Square（正方形のマス目）

・Board（盤面）

・Game

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

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

データの受け渡し

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

renderSquare(i) {
    return <Square />;
  }

//次のコードに変更

 renderSquare(i) {
    return <Square value={i} />;
  }

renderSquare(i) {

return <Square />;

}

//次のコードに変更

renderSquare(i) {

return <Square value={i} />;

}

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

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {/* TODO */}
      </button>
    );
  }
}

//次のコードに変更

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

class Square extends React.Component {

render() {

return (

{/* TODO */}

</button>

);

}

//次のコードに変更

class Square extends React.Component {

render() {

return (

{this.props.value}

</button>

);

}

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

実行してみる

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

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

前へ＜ーーー＞つづく