Reactjs 如何在react js中将变量从类组件传递到函数组件

我是React Js新手，对于我的项目，我开始使用React Js编写一个在线测试。我想将score变量的值从quick.js类组件传递到Graph.js函数组件。你能帮我解决这个问题吗？我试了很多，但还是被卡住了。请帮帮我，伙计们

quick.js代码：

import React, {Component} from 'react';
import { Pie } from 'react-chartjs-2';
import PieChart from './Graph';
class Quiz extends Component{

  constructor(props){
    super(props)
    this.state={
      userAnswer:null,
      currentIndex:0,
      options: [],
      quizEnd: false,
      score:0,
      disabled:true,
    }
  }
  checkStatistics(score)
      {
        console.log('in check statistics function')
        this.setState(
          {
            score: score
          }
        )
        
        // this.props.navigation.navigate("/Graph", {score })
      //  window.location.href = "/Graph";
      window.location.href = 'http://localhost:3000/Graph?score=${score}';
      }
render()
  {
    const {question,options,currentIndex,userAnswer,quizEnd}= this.state
    if(quizEnd){
      return(
        <div className="containerBox">
          <h1> Game Over. Final score is {this.state.score} points</h1>
          <p> The correct answers for the quiz are</p>
          <ul>
            {QuestionBank.map((item,index) => (
              <li className='options'
              key={index}>
                {item.answer}
              </li>
            ))}
          </ul>
          {currentIndex===QuestionBank.length-1 &&
        <button className="attemptButton" onClick={this.attemptAnotherTry} disabled= {this.state.disabled}>
            Retest?
        </button>
    }
{currentIndex===QuestionBank.length-1 &&
 <button onClick={this.checkStatistics.bind(this, this.state.score)}>Check Statistics</button>}
   </div>
      )
    }
 }
}

export default Quiz;

import React，{Component}来自'React'；
从'react-chartjs-2'导入{Pie}；
从“./Graph”导入图表；
类扩展组件{
建造师（道具）{
超级（道具）
这个州={
userAnswer:null，
当前索引：0，
选项：[]，
奎曾德：错，
分数：0，
残疾人:对,，
}
}
检查统计（分数）
{
console.log（'in check statistics function'）
这是我的国家(
{
分数：分数
}
)
//this.props.navigation.navigate（“/Graph”，{score}）
//window.location.href=“/Graph”；
window.location.href=http://localhost:3000/Graph?score=${score}'；
}
render（）
{
const{question，options，currentIndex，userAnswer，quizEnd}=this.state
if（quizEnd）{
返回(
游戏结束。最终得分为{this.state.score}分
测验的正确答案是


{QuestionBank.map（（项目，索引）=>(

{item.answer}

))}

{currentIndex==QuestionBank.length-1&&
重新测试？
}
{currentIndex==QuestionBank.length-1&&
检查统计数据}
)
}
}
}
导出默认测验；

Graph.js代码

 import React, {useState, useEffect} from 'react';
const PieChart = (props) =>
{
const [chartData,setChartData]= useState({})
    
    const chart = () =>{
        setChartData({
            labels: ['Correct Answers', 'Incorrect Answers'],
            datasets:[
                {
                    label: 'statistical chart',
 data:[props.score,2],
 backgroundColor: ['rgba(255,99,132,1)',
                'rgba(255,205,86,1)'],
                borderWidth: 4
                }
            ]
        })
    }
   useEffect(()=>
   {
       chart()
   },[])
 return(
        <div>
<div style={{width:'1000px', height:'1000px',textAlign:"center",marginLeft:'250px'}}>
    <Pie  data={chartData}/>
    <Link to="/Test" style={{textAlign:"center"}}>Attempt test again</Link>
    {/* <Pie data={this.getChartData}/> */}
</div>
  </div>  
       
      
      
    )
}

export default PieChart;    

import React，{useState，useffect}来自“React”；
const PieChart=（道具）=>
{
常量[chartData，setChartData]=useState（{}）
常数图=（）=>{
setChartData({
标签：[“正确答案”、“错误答案”]，
数据集：[
{
标签：“统计图表”，
数据：[道具得分，2]，
背景颜色：['rgba（255,99132,1）]，
"rgba(255205,86,1)",，
边框宽度：4
}
]
})
}
useffect（（）=>
{
图表（）
},[])
返回(
再次尝试测试
{/*  */}
)
}
导出默认图形；

这两个组件是如何关联的？您会从另一个组件调用它们吗？您可以从Main.js页面调用quick.js并向其传递一个回调函数，该函数允许quick.js向Main.js返回一个值，然后您可以调用Graph.js并将该值作为道具传递给它。这两个组件有何关联？您会从另一个组件调用它们吗？您可以从Main.js页面调用quick.js并向其传递回调函数，该函数将允许quick.js向Main.js返回一个值，然后您可以调用Graph.js并将该值作为道具传递给它。