如何使用 ReactJS 创建掷骰子应用程序？

假设有两个骰子和一个掷骰子的按钮。当我们单击按钮时，两个骰子都会摇晃并生成一个新数字，该数字显示在骰子的上表面（以虚线形式作为标准骰子）。每次我们掷骰子时，上面显示的数字都会随机生成。

有两个组件Die和RollDice 。 Die 组件负责显示一个单独的 Dice。它是一个无状态组件。它使用 font-awesome 库来显示骰子上表面的标准点。 RollDice 组件包含生成随机数以显示在骰子上表面的所有逻辑，单击滚动按钮即可滚动每个骰子。 RollDice 组件涉及两个状态，名为“die1”和“die2”。每个都使用值 one 进行了初始化，即每个骰子在应用程序第一次启动时显示一个（一个点）。

现在，我们将 click 事件处理程序设置为掷骰子按钮，当任何人点击该按钮时，我们使用 setState 从一到六将 die1 和 die2 的状态更改为某个随机数（我们使用数字作为单词，因为 font-很棒的库处理字数以显示确切的点数）。我们还确保当骰子滚动时用户不能再次点击该按钮。为此，我们使用初始设置为 false 的状态“滚动”，当骰子滚动时，将滚动设置为 true 并启动一秒的计时器。一秒钟后再次将滚动状态设置为假'。当滚动状态设置为 true 时禁用按钮。

这是应用程序的粗略概述。让我们实现它以更好地理解它。

例子：

index.js：

Javascript

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
 
ReactDOM.render(, document.querySelector('#root'))

---

App.js： App 组件仅呈现单个 RollDice 组件

Javascript

import React from 'react';
import RollDice from './RollDice'
 
function App() {
  return (
    

      
    
  );
}
 
export default App;

RollDice.js ：它包含所有背后的逻辑。设置事件处理程序，根据用户的交互渲染 Die 组件更新所有状态。该文件必须由您创建。

Javascript

import React,{ Component } from 'react'
import './RollDice.css'
import Die from './Die'
 
class RollDice extends Component{
 
  // Face numbers passes as default props
  static defaultProps = {
    sides : ['one', 'two', 'three',
             'four', 'five', 'six']
  }
  constructor(props){
    super(props)
     
    // States
    this.state = {
      die1 : 'one',
      die2 : 'one',
      rolling: false
    }
    this.roll = this.roll.bind(this)
  }
  roll(){
    const {sides} = this.props
    this.setState({
     
      // Changing state upon click
      die1 : sides[Math.floor(Math.random() * sides.length)],
      die2 : sides[Math.floor(Math.random() * sides.length)],
      rolling:true
    })
     
    // Start timer of one sec when rolling start
    setTimeout(() => {
     
      // Set rolling to false again when time over
      this.setState({rolling:false})
    },1000)
  }
 
  render(){
    const handleBtn = this.state.rolling ?
                      'RollDice-rolling' : ''
    const {die1, die2, rolling} = this.state
    return(
      

        

          
          
        
        
          {this.state.rolling ? 'Rolling' : 'Roll Dice!'}
        
      
    )
  }
}
 
export default RollDice

Die.js：负责显示单骰子组件，只有与父 RollDice 组件通信的正确虚线数字面。该文件必须由您创建。

Javascript

import React, {Component} from 'react'
import './Die.css'
 
class Die extends Component{
  render(){
    const {face, rolling} = this.props
     
    // Using font awesome icon to show
    // the exactnumber of dots
    return 
  }
}
 
export default Die

RollDice.css :样式化 RollDice 组件内容

CSS

.RollDice{
  display: flex;
  flex-flow: column nowrap;
  min-height: 100vh;
}
 
/* Shows each dice in one row */
.RollDice-container{
  display: flex;
  justify-content: center;
  align-content: center;
}
/* Stylling rolldice button */
.RollDice button{
  width:15em;
  padding:1.5em;
  border: 0px;
  border-radius: 10px;
  color:white;
  background-color:black;
  margin-top: 3em;
  align-self: center;
}
 
/* Setting hover effect on button */
.RollDice button:hover{
  cursor: pointer;
}
 
.RollDice-rolling{
  border: 0px;
  border-radius: 10px;
  background-color:darkslateblue !important;
  opacity:0.7
}

Die.css：为每个 die 组件设置样式并为其设置动画效果。

CSS

/* Styling each Die */
.Die{
  font-size:10em;
  padding:0.25em;
  color:slateblue;
}
 
/* Applying Animation */
.Die-shaking{
  animation-name:wobble;
  animation-duration: 1s;
}
 
/* Setting Animation effect to the
   dice using css keyframe */
@keyframes wobble {
  from {
    transform: translate3d(0, 0, 0);
  }
  15% {
    transform: translate3d(-25%, 0, 0)
               rotate3d(0, 0, 1, -5deg);
  }
  30% {
    transform: translate3d(20%, 0, 0)
               rotate3d(0, 0, 1, 3deg);
  }
  45% {
    transform: translate3d(-15%, 0, 0)
               rotate3d(0, 0, 1, -3deg);
  }
  60% {
    transform: translate3d(10%, 0, 0)
               rotate3d(0, 0, 1, 2deg);
  }
  75% {
    transform: translate3d(-5%, 0, 0)
               rotate3d(0, 0, 1, -1deg);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

输出 ：