如何使用 ReactJS 创建抛硬币应用程序？

基本上，我们想构建一个应用程序来抛硬币。每次随机翻转硬币时，硬币的一面会从正面和尾部显示出来，我们还想跟踪硬币翻转了多少次，以及正面和反面出现了多少次。

我们创建三个组件“App”和“FlipCoin”和“Coin”。应用程序组件仅呈现单个 FlipCoin 组件。 App 组件中没有实际的逻辑。 FlipCoin 组件包含所有背后的逻辑。它有一个默认的道具硬币，它是一个包含两个图像头部和尾部（硬币的侧面）的数组。它是一个有状态的组件，具有三个状态的当前面、翻转的总数和正面的数量。单击事件处理程序设置为按钮“翻转”。处理程序函数基本上根据随机生成的值随机选择面部头部或尾部，并在每次处理程序运行时从所选面部更新当前面部状态。处理程序函数还跟踪单击翻转按钮的次数以及随机生成的头脸的次数，并将其值更新为相应的状态。最后一个 Coin 组件负责根据 FlipCoin 组件中的处理函数随机选择的面显示正确的硬币面。 FlipCoin 使用道具系统与 Coin 组件进行通信。

示例：在此示例中，我们将对 App.js 进行一些更改，以导入一个组件。在该组件中，我们将包括图像硬币的两侧。并将其翻转为单个图像。

文件名- index.js：

Javascript

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

Filename- App.js：应用程序组件仅呈现单个 FlipCoin 组件

Javascript

import React from 'react';
import FlipCoin from './FlipCoin'
 
const App=()=> {
  return (
    

      
    
  );
}
 
export default App;

文件名- FlipCoin.js：它包含所有的背后逻辑。它是一个有状态的组件。状态是 currFace、totalFlips 和 head。它包含硬币的两侧作为默认道具，并根据每次组件重新渲染时生成的随机数更新 currFace 状态。它负责设置事件处理程序，根据用户交互渲染 Coin 组件更新所有状态。

Javascript

import React,{ Component } from 'react'
import Coin from './Coin'
 
class FlipCoin extends Component{
  static defaultProps = {
    coins : [
     
      // Sides of the coin
      {side:'head', imgSrc:
'https://media.geeksforgeeks.org/wp-content/uploads/20200916123059/SHalfDollarObverse2016head-300x300.jpg'},
      {side:'tail', imgSrc:
'https://media.geeksforgeeks.org/wp-content/uploads/20200916123125/tails-200x200.jpg'}
    ]
  }
 
  constructor(props){
    super(props)
     
    // Responsible to render current updated coin face
    this.state = {
       
      // Track total number of flips
      currFace : null,
      totalFlips:0,
      heads: 0
    }
     
    // Binding context of this keyword
    this.handleClick = this.handleClick.bind(this)
  }
 
   // Function takes array of different faces of a coin
  //  and return a random chosen single face
  choice(arr){
    const randomIdx = Math.floor(Math.random() * arr.length)
    return arr[randomIdx]
  }
   
  // Function responsible to update the states
  // according to users interactions
  flipCoin(){
    const newFace = this.choice(this.props.coins)
    this.setState(curState => {
      const heads = curState.heads +
      (newFace.side === 'head' ? 1 : 0)
      return {
        currFace:newFace,
        totalFlips:curState.totalFlips + 1,
        heads:heads
      }
    })
  }
 
  handleClick(){
    this.flipCoin()
  }
  render(){
    const {currFace, totalFlips, heads} = this.state
    return(
      

        
Let's flip a coin
         
        {/* If current face exist then show current face */}
        {currFace && }
         
        {/* Button to flip the coin  */}
        Flip Me!
         
         
 

          Out of {totalFlips} flips, there have been {heads} heads
          and {totalFlips - heads} tails
        
 
 
 
      
    )
  }
}
 
export default FlipCoin

 
Filename- Coin.js：负责根据 FlipCoin 组件的 currFace 状态显示硬币的一面。 FlipCoin 组件通过 props 系统与 Coin 组件通信

Javascript

import React,{ Component } from 'react'
 
class Coin extends Component{
  render(){
    return(
      

        
      
    )
  }
}
 
export default Coin

输出 ：