hukurouo.com 🦉

2020-12-16 :

react day17：React入門3


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

の改良案を書いてみた。

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

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

src\index.tsx
    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文はこんな感じで書ける。

src\index.tsx
      return (
        <li key={move}>
          <button onClick={() => this.jumpTo(move)}>
             {stepNum==move 
                ? <b>{desc}</b>
                : desc
              }
          </button>
        </li>
      );
  • Board でマス目を並べる部分を、ハードコーディングではなく 2 つのループを使用するように書き換える。

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

src\index.tsx
    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>
    );

今日はここまで