Javascript 在react js中将函数从父级传递给子级

我已经编写了一个类Box.js，它呈现一个div（变成长方体或正方形）和另一个文件RandColor.js，其中包含一个函数来生成不同的随机rgb值，这只是一个帮助函数，并被导入父类中，父类为BoxContainer.js。BoxContainer通过map内置函数，借助RandColor.js文件渲染30个框，并为每个框指定不同的颜色。该程序可以正常运行，但不是将我的RandColor.js函数分别导入BoxContainer.js和Box.js文件，而是在单击div时更改状态（框的颜色），我只想将RandColor.js函数导入父文件BoxContainer.js，然后将其作为道具传递给单个Box.js组件以更改状态（框的颜色）。 以下是my 3文件的代码

import React, { Component } from 'react'
import {RandColor} from './RandColor';
import Box from './Box';
import './BoxContainer.css';


class BoxContainer extends Component{
     static defaultProps = {
          numBoxes: 21
     }

     render(){
          const boxes = Array.from({length: this.props.numBoxes}).map( () => (
               <Box colors={RandColor()} />
          ))

          return (
               <div className="BoxContainer">
                    {boxes}
               </div>
          )
     }
}

export default BoxContainer;

---

这是我的助手函数，用于生成随机rgb值，RandColor.js不要在BoxContainer中调用它。我知道我做错了。但是这样做的正确方法是什么

import React, { Component } from 'react';

import './Box.css';
import {RandColor} from './RandColor';

class Box extends Component{

     constructor(props){
          super(props);
          this.state = {
               color: this.props.colors,
          }
     }

     changeColor(){
          let newColor = RandColor();
          this.setState({
               color: newColor
          })
     }

     handleClick(){
          this.changeColor();
     }

     render(){

          return (
               <div className="Box" 
                    style={{backgroundColor: this.state.color}} 
                    onClick={() => {this.handleClick()}}>
               </div>
          )
     }
}

export default Box;

function RandColor(){
     let r = Math.floor(Math.random() * 256 );
     let g = Math.floor(Math.random() * 256 );
     let b = Math.floor(Math.random() * 256 );
     const rgbValue = `rgb(${r}, ${g}, ${b})`;
     return rgbValue;
}

export {RandColor};