如何使用 ReactJS 创建一个彩盒应用程序？

基本上，我们想要构建一个应用程序来显示分配给每个盒子的不同颜色的盒子的数量。每次应用加载时都会分配不同的随机颜色。当用户单击任何框时，它会将其颜色更改为一些不同的随机颜色，该颜色不等于其先前的颜色值。

我们创建了三个组件“App”、“BoxContainer”和“Box”。应用程序组件仅呈现单个 BoxContainer 组件。 App 组件中没有实际的逻辑。 BoxContainer 组件包含所有的背后逻辑。它有一个默认的 prop 'num'，它解释了屏幕上显示的许多不同颜色的框。它是一个有状态的组件，具有一个包含 RGB 颜色值数组的单一状态。我们映射状态“colors”的每种颜色，并为每种颜色渲染一个“Box”组件。盒子组件负责在盒子的背景中显示每个单独的盒子，并为其设置适当的颜色。 Box 组件为每个 box 组件设置一个单击事件处理程序，当用户单击任何框时，将执行一些逻辑来更改该框的颜色。 BoxContainer 组件使用 props 系统与 Box 组件进行通信。

例子：

• index.js：

  Javascript

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

  
  
  
  
  
  

  ---

  
  

• App.js : App 组件仅呈现单个 BoxContainer 组件

  Javascript

  import React from 'react';
  import BoxContainer from './BoxContainer'
    
  function App() {
    return (
      
  
        
      
    );
  }
    
  export default App;
  

• BoxContainer.js ：它包含所有背后的逻辑。它是一个有状态的组件。有一个包含 RGB 颜色值数组的状态。颜色数（应用程序启动时要渲染的颜色框数）设置为默认道具。我们映射每种颜色的状态颜色，并为每种颜色渲染一个“盒子”组件。 BoxConatiner 组件还包含一个 changeColor 方法，该方法负责在每次单击框时更改框的颜色。它生成一个新的随机颜色，直到新的颜色值不等于框的先前颜色，并通过插入该新颜色代替先前的颜色值来更新状态颜色。

  Javascript

  import React,{ Component } from 'react'
  import './BoxContainer.css'
  import Box from './Box'
  import { rgbValue, generateColors } from './helpers'
    
  class BoxContainer extends Component{
    
    // Number of color boxes want shows by default
    static defaultProps = {
      num : 18
    }
    constructor(props){
      super(props)
      this.state = {
        
        // Color state contains array of rgb color values
        colors : generateColors(this.props.num)
      }
      this.changeColor = this.changeColor.bind(this)
    }
    
    changeColor(c){
      
      // Create new random rgb color
      let newColor
      do{
        newColor = `rgb(
          ${rgbValue()},
          ${rgbValue()},
          ${rgbValue()}
        )`
          
      // If new rgb color is equal to previous 
      // color of the box then again create new 
      // rgb color value
      }while(newColor === c)
    
      // Change colors array state by inserting 
      // new color value in place of previous color
      this.setState(st => ({
        colors : st.colors.map(color => {
          if(color !== c) return color
          return newColor
        })
      }))
    }
    
    render(){ 
      return(
        
  
          {this.state.colors.map(color => (
            
            // For each color make a box component
            
          ))}
        
      )
    }
  }
    
  export default BoxContainer
  

• Coin.js ：它负责在背景中显示每个框并设置适当的颜色。它还为每个 div 组件设置了一个点击处理程序，并在每次用户点击该框时执行一个回调。单击处理程序回调返回调用 BoxContainer 组件的 changeColor 方法，传递框的当前颜色。 BoxContainer 组件使用 props 系统与 Coin 组件通信。

  Javascript

  import React,{ Component } from 'react'
    
  class Box extends Component{
    constructor(props){
      super(props)
      this.handleChangeColor = this.handleChangeColor.bind(this)
    }
    
    // Handler callback
    handleChangeColor(){
      
      // Call parent component cahngeColor  method passing the
      // color value of div
      this.props.changeColor(this.props.color)
    }
    
    render(){
      
      // Create a div component and assign the given 
      / color value by BoxContainer component as its
      // background color
      return 
  
    }
  }
    
  export default Box
  

• helper.js ：它创建并返回一些在我们的主要组件中使用的辅助函数。

  Javascript

  // Method return a random number from 0 to 255 
  const rgbValue = () => {
    return Math.floor(Math.random() * 256)
  }
    
  // Method generates an array of rgb colors
  const generateColors = (num) => {
    let colors = []
      
    for(let i=0; i

• BoxContainer.css：

  CSS

  .BoxContainer{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
    flex:1
  }
  

输出 ：

彩盒