react day17：React入門3

2020-12-16

https://ja.reactjs.org/tutorial/tutorial.html

の改良案を書いてみた。

履歴内のそれぞれの着手の位置を (col, row) というフォーマットで表示する。

stateに座標データを持たせた。座標の算出は3x3のサイズだったのでベタ書きで。

this.setState({
      history: history.concat([{
        squares: squares,
        colrow: calculateColRow(i)
      }]),
      stepNumber: history.length,
      xIsNext: !this.state.xIsNext,
    });

function calculateColRow(i: number){
  const colrows = ['1,1', '2,1', '3,1', '1,2', '2,2', '3,2', '1,3', '2,3', '3,3']
  return colrows[i]
}

着手履歴のリスト中で現在選択されているアイテムをボールドにする。

JSXのif文はこんな感じで書ける。

return (
        <li key={move}>
          <button onClick={() => this.jumpTo(move)}>
             {stepNum==move 
                ? <b>{desc}</b>
                : desc
              }
          </button>
        </li>
      );

Board でマス目を並べる部分を、ハードコーディングではなく 2 つのループを使用するように書き換える。

JSXでループはこう書く。n個の要素を持つ配列の上手い作り方が分かんなくて雑に作ってしまっている。

return (
      <div>
        { Array(0,0,0).map((_val,i)=>{
          return (
            <div className="board-row">
              { Array(0,0,0).map((_val,j)=>{
                return (this.renderSquare(3*i + j));
              })}
            </div>
          );
        })}
      </div>
    );

今日はここまで