Javascript 如何将变量(实际上是一个列表)导出到类内函数中的其他.js文件

Javascript 如何将变量(实际上是一个列表)导出到类内函数中的其他.js文件,javascript,reactjs,Javascript,Reactjs,如何将类内函数中修改的变量或列表导出到其他.js文件 renderBoxContent = () => { let total = 0; let Total = 0; let itemList = []; let data = []; this.state.availableItems.map((items)=> { if(items.purchase > 0){ Total += items.price*items.pur

如何将类内函数中修改的变量或列表导出到其他.js文件

renderBoxContent = () => {

  let total = 0;
  let Total = 0;
  let itemList = [];
  let  data = [];

  this.state.availableItems.map((items)=> {

      if(items.purchase > 0){
       Total += items.price*items.purchase;
       total = items.price*items.purchase;
       console.log(items.purchase);
       console.log(total);

          data.push(
          {
            key: items.name,
            name: items.name,
            // src: items.image,
            singlePrice: items.price.toFixed(2),
            purchase: items.purchase,
            totalItemPrice: total.toFixed(2),
          }
        )
      }
  })


  //how to export 'data' to other .js file?

  itemList.push(  <Table defaultExpandAllRows={false} locale={{emptyText: 'Empty Cart'}} style={{background: '#ffffff'}} pagination={false} columns={column} dataSource={data} size="small" />)
  itemList.push( <h3 style={{paddingLeft:15,paddingTop:20}}>    Total     {Total.toFixed(2)}</h3>)
  return itemList;
 }
renderBoxContent=()=>{
设total=0;
设Total=0;
让itemList=[];
让数据=[];
this.state.availableItems.map((项目)=>{
如果(items.purchase>0){
合计+=项目。价格*项目。采购;
总计=项目。价格*项目。采购;
console.log(items.purchase);
控制台日志(总计);
数据推送(
{
关键字:items.name,
名称:items.name,
//src:items.image,
单一价格:项目。价格。固定价格(2),
采购:items.purchase,
totalItemPrice:总计固定(2),
}
)
}
})
//如何将“数据”导出到其他.js文件?
itemList.push()
itemList.push(Total{Total.toFixed(2)})
返回项目列表;
}

应该能够访问和导入other.js文件中的'data'列表变量

您似乎正在使用react,因此简单地说,您应该查看或,而不是创建自定义函数来将数据从一个文件导入和导出到另一个文件。 以上两种方法都用于创建全局状态,可以在项目的任何文件中访问该全局状态

一开始理解它们会有点困难,但一旦你知道如何使用它们(其中一个),它将使全局状态管理对你来说非常容易。

使用它们怎么样?

首先创建和导出上下文

export const DataContext = React.createContext();
将组件包装在提供者组件中,并将数据提供给它

<DataContext.Provider value={data}>

如果您的组件是彼此的父母或祖父母,我建议您改为

在导出类中创建一个函数,该函数返回要导出的列表在需要该函数的文件中导入该类,并调用返回该列表的函数如何调用导入的calssif函数中的特定函数如果要导出的函数是另一个react组件的一部分,则您做错了,但是,如果它只是一个具有您想要的函数的助手文件,那么您可以将类名从“PATH_导入到_文件”;然后是className.function();
import DataContext from '...' // add your path
const data = useContext(DataContext)