Javascript 如何访问另一个JS文件中的其他JS元素

因此，我正在制作一个ReactJS应用程序，并想知道如何获取一个JS文件中滑块元素的值，以便传输到另一个JS文件。我正在构建一个随机值数组，并希望该数组的大小取决于页面顶部的HTML滑块

生成数组和生成UI元素发生在不同的.JS文件中，所以我只需要获取从UI JS文件到数组生成文件的滑块值。以下是我的当前代码：

数组：

import React from 'react'
import './Array.css'
import './Navbar.js'

function Array(props){
    
    var size = document.getElementById("arrayRange").value; 

    //Fills array with values, not randomized yet
    for (var numArray=[],i=0;i<size;++i) numArray[i]=i;

    // http://stackoverflow.com/questions/962802#962890
    //Generates random nums to fill the array based on size 
    function shuffle(array) {
      var tmp, current, top = array.length;
      if(top) while(--top) {
        current = Math.floor(Math.random() * (top + 1));
        tmp = array[current];
        array[current] = array[top];
        array[top] = tmp;
      }
      return array;
    }
    
    numArray = shuffle(numArray);

    return (
        <div className = 'elements'>
           {numArray.map(num => (
              <div className = "text">
                <h2>{num}</h2>
             </div>
           ))}
        </div>
    );
}


export default Array; 

从“React”导入React
导入“./Array.css”
导入“./Navbar.js”
功能阵列（道具）{
var size=document.getElementById（“arrayRange”）.value；
//用值填充数组，但尚未随机化
对于（var numArray=[]，i=0；i(
{num}
))}
);
}
导出默认数组；

从“React”导入React
导入“./NavBar.css”
函数NavBar（）{
返回(
创建数组
);
}
导出默认导航栏；

某种形式的高级状态管理（上下文API、redux、mobx）最有可能解决您的问题。

import React from 'react'
import './NavBar.css'

function NavBar(){
    return(
      <div className= "topBar"> 
          <input type="range" min="4" max = "500" class = "slider" id="arrayRange"></input>
          <button>Create Array</button>

          
          
      </div>
    );
  }



export default NavBar;