Javascript 如何从一个JS文件中的输入滑块到另一个JS文件中获取状态值-ReactJS

所以我希望在我的网站上有一个滑块，它包含在一个名为Header.js的文件中。代码使用state获取值，并在更改时设置其新值。我有另一个用于生成数组的文件，它生成的随机数的大小基于滑块的值

我的问题是如何使用数组将滑块的值移动到另一个JS文件？这两个文件的代码如下：

Header.js：

import React, {Component, useState} from 'react'
import Slider from '@material-ui/core/Slider';

function Header() {

const [value, setValue] = useState(0);


const handleChange = (event, newValue) => {
    setValue(newValue);
}


return (
    <div className = "slider" style = {{width: "100px"}}> 
        <Slider value = {value} onChange = {handleChange}></Slider>
        <p>{value}</p>
    </div>
 )
}
export default Header

import React，{Component，useState}来自“React”
从“@material ui/core/Slider”导入滑块；
函数头（）{
const[value，setValue]=useState（0）；
常量handleChange=（事件，newValue）=>{
设置值（新值）；
}
返回(
{value}

)
}
导出默认标题

Array.js：

**import React, { Component} from 'react'


function Array(){
    
    //here is where i would do array generation based on the size of slider
    
    
    
    return(
        <div> 
            <h1>{array}</h1>
        </div>
    )
}


export default Array

**从“React”导入React，{Component}
函数数组（）{
//在这里，我将根据滑块的大小生成数组
返回(
{array}
)
}
导出默认数组

App.js

function App() {
  return (
    <div className="App">

    <Header/>
    </div>
  );
}

函数应用程序（）{
返回(
);
}

您需要将值作为道具发送到阵列组件。见下文：

Header.js

   import React, {Component, useState} from 'react'
    //import your Array component
    import {Array} from 'Array.js'
    import Slider from '@material-ui/core/Slider';
    
    function Header() {
    
    const [value, setValue] = useState(0);
    
    
    const handleChange = (event, newValue) => {
        setValue(newValue);
    }
    
    
    return (
            <>
            <div className = "slider" style = {{width: "100px"}}> 
                <Slider value = {value} onChange = {handleChange}></Slider>
                <p>{value}</p>
            </div>
           //Pass state to array component
           <Array value={value} />
           </>
     )
    }
    export default Header

import React，{Component，useState}来自“React”
//导入阵列组件
从“Array.js”导入{Array}
从“@material ui/core/Slider”导入滑块；
函数头（）{
const[value，setValue]=useState（0）；
常量handleChange=（事件，newValue）=>{
设置值（新值）；
}
返回(
{value}

//将状态传递给数组组件
)
}
导出默认标题

Array.js

    **import React, { Component} from 'react'
    
    //Declare value as prop in the Array function
    function Array({value}){
        
        //here is where i would do array generation based on the size of slider
        
        
        
        return(
            <div> 
                <h1>{array}</h1>
            </div>
        )
    }
    
    
    export default Array

**从“React”导入React，{Component}
//在数组函数中将值声明为prop
函数数组（{value}）{
//在这里，我将根据滑块的大小生成数组
返回(
{array}
)
}
导出默认数组

太好了，很乐意帮忙！