Web_React #24

14520 ワード
React web テキストリンク
210907
Web_React #24
  • サイコロゲーム総得点計算、記録機能
    -App.js 
    • import { useState } from 'react'
import Button from './Button'
import Dice from './Dice'

// 1~n까지의 랜덤한 정수 반환
function random(n) {
  return Math.ceil(Math.random() * n)
}

function App() {
  const [num, setNum] = useState(1) // 주사위 눈 값을 위한 state
  const [sum, setSum] = useState(0) // 점수 합산을 위한 state

  const handleRollClick = () => {
    const nextNum = random(6) //1~6까지의 랜덤한 숫자를 가진다.
    setNum(nextNum)
    setSum(sum + nextNum) // 주사위 눈 값 더하기
  }

  const handleClearClick = () => {
    setNum(1)
    setSum(0) // 합 0으로 초기화
  }

  return (
    <div>
      <div>
        <Button onClick={handleRollClick}>던지기</Button>
        <Button onClick={handleClearClick}>처음부터</Button>
      </div>
      <div>
        <h2>나</h2>
        <Dice color="red" num={num} />
        <h2>총점</h2>
        <p>{sum}</p>
      </div>
    </div>
  )
}

export default App
    1.合計スコアを計算するステータスの作成
    2.HandleRollClickのランダムサイコロの値とステータス値を設定
    3.HandleClearClickでsumの値を0に初期化
    4.新しいdivタグに要素を配置する

    投げをクリックすると目の値が変わり、それに応じた点数が総得点を増やします.

    最初からクリックしたときに合計0と目の値をリセット
  • 記録
    • -App.js
    import { useState } from 'react'
import Button from './Button'
import Dice from './Dice'

// 1~n까지의 랜덤한 정수 반환
function random(n) {
  return Math.ceil(Math.random() * n)
}

function App() {
  const [num, setNum] = useState(1) // 주사위 눈 값을 위한 state
  const [sum, setSum] = useState(0) // 점수 합산을 위한 state
  const [gameHistory, setGameHistory] = useState([])  // 점수 기록을 위한 배열 state

  const handleRollClick = () => {
    const nextNum = random(6) //1~6까지의 랜덤한 숫자를 가진다.
    setNum(nextNum)
    setSum(sum + nextNum) // 주사위 눈 값 더하기
    setGameHistory([...gameHistory, nextNum]) // 값 설정 
  }

  const handleClearClick = () => {
    setNum(1)
    setSum(0) // 합 0으로 초기화
    setGameHistory([])  // 빈 배열 전달
  }

  return (
    <div>
      <div>
        <Button onClick={handleRollClick}>던지기</Button>
        <Button onClick={handleClearClick}>처음부터</Button>
      </div>
      <div>
        <h2>나</h2>
        <Dice color="red" num={num} />
        <h2>총점</h2>
        <p>{sum}</p>
        <p>기록</p>
        <p>{gameHistory.join(', ')}</p>
      </div>
    </div>
  )
}

export default App
    勝負を記録するための配列状態を作成し、各ボタンをクリックすると、初期化によって空の配列が渡され、投げボタンにはgameHistoryの値と新しい結果値が追加されます.
  • 石切り布勝負記録
    -App.js 
    • import { useState } from 'react'
import Button from './Button'
import HandButton from './HandButton'
import HandIcon from './HandIcon'
import utils from './utils'

const rsp = ['rock', 'scissor', 'paper']

const getResult = (player, pc) => {
  if (utils[player] === pc) return '승리'
  if (utils[pc] === player) return '패배'
  return '무승부'
}
function random(n) {
  return rsp[Math.ceil(Math.random() * n)]
}

function App() {
  const [Hand, setHand] = useState('rock')
  const [OtherHand, setOtherHand] = useState('rock')
  const [gameHistory, setGameHistory] = useState([])  // 게임 승부 결과 기록

  const handleClick = (value) => {
    setHand(value)
    const nextOtherHand = random(2)
    const nextHistoryItem = getResult(value,nextOtherHand)
    setOtherHand(nextOtherHand)
    setGameHistory([...gameHistory, nextHistoryItem])
  }
  const handleClearClick = () => {
    setHand('rock')
    setOtherHand('rock')
    setGameHistory([])  // 빈 배열로 초기화
  }

  return (
    <>
      <Button onClick={handleClearClick}>{'처음부터'}</Button>
      <div>
        <HandIcon value={Hand} />
        vs
        <HandIcon value={OtherHand} />
      </div>
      <div>
        <p>
          승부 기록 : {gameHistory.join(', ')}
        </p>
      </div>
      <HandButton value="rock" onClick={handleClick} />
      <HandButton value="scissor" onClick={handleClick} />
      <HandButton value="paper" onClick={handleClick} />
    </>
  )
}

export default App
    前のサイコロゲームと似たように結果を得て、並べた状態にします.

    配列やオブジェクトなどの参照形式を使用する場合は、メソッドや割り当て演算子を使用して値を変更するのではなく、新しい値を作成して変更する必要があります.
  • state
    React.jsは、フローデータを使用する場合にstateを使用します.
  • 秒の値を設定する必要があります->this.state={}またはuseState
    • を使用
  • ステータス値を変更する場合は、ステータスを直接操作するのではなくsetStateメソッドを使用します.
    stateを変更するたびに変更を検出->再レンダリング->setStateメソッドを使用せずに直接変更するたびに変更を検出X->X
    • を再レンダリング
    [React] Component & Props
    Vue.js+TypeScript